AngularJS form directive

Definition and usage

AngularJS modification <form> The default behavior of elements.

Form elements within an AngularJS application are assigned certain properties. These properties describe the current state of the form.

The form has the following states:

• $pristine No fields have been modified
• $dirty One or more fields have been modified
• $invalid Form content is invalid
• $valid Form content is valid
• $subscribed Form has been submitted

Each state's value represents a boolean value, indicating true Or false.

If the action attribute is not specified, AngularJS form will prevent the default action, i.e., submitting the form to the server.

Instance

Example 1

As long as the required input field is empty, the 'valid status' of this form will not be considered 'true':

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>The form's valid status is:</p>
<h1>{{myForm.$valid}}</h1>

Try it yourself

Example 2

Apply styles to the unmodified (original) form and the modified form:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>

Try it yourself

Syntax

<form name="formname</form>

By using name The value of the attribute to refer to the form.

CSS Classes

Forms within AngularJS applications are assigned certain classes. These classes can be used to set form styles based on their state.

The following classes have been added:

• ng-pristine No fields have been modified
• ng-dirty One or more fields have been modified
• ng-valid Form content is valid
• ng-invalid Form content is invalid
• ng-valid-key Validate each key each time. For example:ng-valid-requiredIt is very useful when there are more than one item to be validated.
• ng-invalid-key For example:ng-invalid-required

If the value represented by the class is falseIf these classes are deleted.