Form Support in Blazor TextArea Component

10 Jul 20241 minute to read

The TextArea component seamlessly integrates with HTML forms, enabling efficient submission of longer text data. By including TextArea inputs within HTML forms, users can conveniently input multiline text content and submit it as part of form submissions.

This integration enhances the usability of forms, allowing users to provide detailed feedback, enter lengthy descriptions, or input other multiline text data seamlessly. Please find the demo link here.

RAZOR

@using Syncfusion.Blazor.Inputs
@using System.ComponentModel.DataAnnotations

<EditForm Model="@formModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">
    <SfTextArea @bind-Value="@formModel.Address" Placeholder="Enter the Address" FloatLabelType="@FloatLabelType.Auto"></SfTextArea>
    <button type="submit">Submit</button>
</EditForm>

@code {
    private FormModel formModel = new FormModel();

    private void HandleValidSubmit()
    {
        // Handle the valid form submission here
    }

    private void HandleInvalidSubmit()
    {
        // Handle the invalid form submission here
    }

    public class FormModel
    {
        [Required(ErrorMessage = "Address is required.")]
        public string Address { get; set; }
    }
}

Integration with FormValidator component

TextArea component seamlessly integrates with the FormValidator component, allowing users to incorporate textarea inputs into form validation processes efficiently.

By integrating TextArea component with the FormValidator component, users can enforce validation rules specific to text inputs, such as required fields, minimum and maximum length constraints, pattern matching, and more. This ensures that user-submitted text data meets specified criteria and maintains data integrity.