Form Support in EJ2 TypeScript TextArea Control

25 Mar 20248 minutes to read

The TextArea control 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.

import { TextArea } from "@syncfusion/ej2-inputs";

let textareaObj: TextArea = new TextArea();
textareaObj.appendTo("#default");
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 TextArea</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Essential JS 2 TextArea Components" />
  <meta name="author" content="Syncfusion" />
  <link href="index.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id='loader'>Loading....</div>
  <div id='container'>
    <div class='wrap'>
      <form id="myForm">
        <span>Please leave your comments</span>
        <br />
        <div id="input-container">
          <textarea id="default" name="myTextarea"></textarea>
        </div>
        <input id="submit" type="submit" value="Submit">
        <input id="reset" type="reset" value="Reset">
      </form>
    </div>
  </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 10px;
    width: 260px;
}

#submit,
#reset {
    margin: 10px 10px;
}

Integration of EJ2 TypeScript TextArea control with FormValidator component

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

By integrating TextArea controls 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.

import { TextArea, FormValidator, FormValidatorModel } from "@syncfusion/ej2-inputs";

let textareaObj: TextArea = new TextArea({
  placeholder: "Enter your comments",
});
textareaObj.appendTo("#comments");

// Initialize Custom placement
let options: FormValidatorModel = {
  customPlacement: (inputElement: HTMLElement, errorElement: HTMLElement) => {
    inputElement.parentElement?.appendChild(errorElement);
  },
};

// Initialize Form validation
let formObj: FormValidator;
formObj = new FormValidator("#formId", options);
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Essential JS 2 TextArea</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Essential JS 2 TextArea Components" />
  <meta name="author" content="Syncfusion" />
  <link href="index.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-base/styles/material.css" rel="stylesheet" />
  <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-inputs/styles/material.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
  <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
  <div id='loader'>Loading....</div>
  <div id='container'>
    <div class='wrap'>
      <form id="formId" class="form-horizontal">
        <div class="form-group">
          <div class="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 class="e-float-line"></span>
          </div>
          <div id="emailError"></div>
        </div>
        <div class="form-group">
          <div class="e-float-input">
            <label>Comments</label>
            <textarea id="comments" name="comments" required data-msg-containerid="commentError"></textarea>
          </div>
          <div id="commentError"></div>
        </div>
        <div class="row">
          <div style="float: left;">
            <button class="btn" type="submit">Submit</button>
          </div>
          <div style="float: left;">
            <button class="btn" type="reset">Reset</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</body>

</html>
#container {
    visibility: hidden;
}

#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 30px 10px;
    width: 260px;
}

.btn {
    margin: 10px 10px;
}