Course Recommendation:

AngularJS textarea directive

Definition and Usage <textarea> AngularJS modifies By using The default behavior of the element, but on the condition that

attribute exists.

They provide data binding, which means they are part of the AngularJS model and can be referenced and updated in AngularJS functions and DOM. They provide validation. Example: fields with required <textarea> attribute $invalid elements, as long as it is empty, its falseThe state will be set to

.

They also provide state control. AngularJS saves the current state of all text area elements.

• The text area field has the following states: This field has not been touched
• $untouched This field has been touched
• $touched This field has not been modified
• $pristine This field has been modified
• $dirty Field content is invalid
• $invalid Field content is valid

$valid

Example

Each state value represents a boolean, either true or false.

Text area with data binding:
<textarea ng-model="myTextarea"></textarea>
<p>The value of the text area field is:</p>

Try It Yourself

<h1>{{myTextarea}}</h1>

Syntax

<textarea ng-model="name"></textarea> By using ng-model

The value of the attribute is used to reference the text area element.

CSS classes within AngularJS applications <textarea> Elements are assigned certain classes. These classes can be used to set the styles of text area elements based on their state.

The following classes have been added:

• ng-untouched This field has not been touched
• ng-touched This field has been touched
• ng-pristine This field has not been modified
• ng-dirty This field has been modified
• ng-valid Field content is valid
• ng-invalid Field content is invalid
• ng-valid-key Validate each key every time. For example:ng-valid-requiredis very useful when there is more than one thing to validate.
• ng-invalid-key For example:ng-invalid-required

If the value represented by the class is falseIf these classes are to be removed.

Example

Apply styles to valid and invalid text area elements using standard CSS:

<style>
textarea.ng-invalid {
    background-color: pink;
}
textarea.ng-valid {
    background-color: lightgreen;
}
</style>

Try It Yourself