Syncfusion AI Assistant

How can I help you?

Form Support in Angular TextArea Component

26 Feb 202611 minutes to read

The TextArea component seamlessly integrates with HTML forms for efficient submission of multiline text data. Include TextArea inputs within your forms to allow users to enter detailed content and submit it as part of the form submission. This integration enhances form usability by providing users with the ability to input lengthy descriptions, feedback, or other multiline text content.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextAreaModule} from '@syncfusion/ej2-angular-inputs'

import { Component,ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import {TextAreaComponent} from '@syncfusion/ej2-angular-inputs';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',   
    template: `<div class="wrap">
                <div class='textarea'>
                  <div className="control_wrapper" id="control_wrapper">
                    <h3 className="form-title">Feedback</h3>
                    <div className="control_wrapper textarea-form">
                        <form id="form-element" method="post">
                            <div className="form-group">
                                <div className="e-float-input">
                                    <label>Email</label>
                                    <input type="email" id="email" name="email" data-email-message="Please enter valid email address."
                                    data-required-message="Required field" required data-msg-containerid="emailError"/>
                                    <span className="e-float-line"></span>
                                </div>
                                <div id="emailError"></div>
                            </div>
                            <div className="form-group">
                                <div>
                                    <label>Comments</label>
                                    <br/>
                                    <ejs-textarea id='default' name="comments" data-msg-containerid="commentError" placeholder='Enter your comments' floatLabelType='Auto' required =""></ejs-textarea>
                                </div>
                                <div id="commentError"></div>
                            </div>
                            <div className="row">
                                <div style="float: left;">
                                    <button className="btn" type="submit">Submit</button>
                                </div>
                                <div style="float: left;">
                                    <button className="btn" type="reset">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <br />
                    <br />
                  </div>
                </div>
              </div>`
})

export class AppComponent {
    @ViewChild('form-element') element?: any;
    @ViewChild('default') mask?: TextAreaComponent;
    public formObject?: FormValidator;
    ngAfterViewInit() {
        // sets required property in the FormValidator rules collection
        let options: FormValidatorModel = {
          rules: {
             'email': { required: [true, "* Please enter valid email"] },
             'comments': {required: [true, "* Please enter your comments"]}
          },
          //to place the error message in custom position
          customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
              (inputElement as HTMLElement | any).parentNode.parentNode.parentNode.appendChild(errorElement);
          }
      };
      this.formObject = new FormValidator(this.element.nativeElement, options);
      var proxy = this;
    }

 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Integration of Angular TextArea Component with FormValidator Component

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

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextAreaModule} from '@syncfusion/ej2-angular-inputs'



import { Component } from '@angular/core';

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <form id="myForm">
                  <span>Please leave your comments</span>
                  <br />
                  <div id ='input-container'>
                    <ejs-textarea id='default' name="myTextarea" placeholder='Enter your comments' floatLabelType='Auto' required=""></ejs-textarea>
                  </div>
                  <input id="submit" type="submit" value="Submit">
                  <input id="reset" type="reset" value="Reset">
                </form>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));