WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS form Directive


Example

This structure's "valid state" won't be consider "true", as long as the required input field is empty:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The structures' substantial state is:</p>
<h1>{{myForm.$valid}}</h1>
Try it yourself »

Definition and Usage

AngularJS changes the default conduct of the <form> element.

Forms inside an AngularJS application are given sure properties. These properties depicts the present condition of the form.

Forms have the accompanying states:

  • $pristine No fields have been changed yet
  • $dirty at least one have been modified
  • $invalid The structure content isn't valid
  • $valid The structure content is valid
  • $submitted The structure is submitted

The estimation of each state speaks to a Boolean esteem, and is either true or then again false.

Forms in AngularJS keeps the default activity, which is presenting the structure to the server, if the activity quality isn't specified.


Syntax

<form name="formname"></form>

Forms are being alluded to by utilizing the estimation of the name attribute.


CSS Classes

Forms inside an AngularJS application are given sure classes. These classes can be utilized to style shapes as indicated by their state.

The following classes are added:

  • ng-pristine No fields has not been altered yet
  • ng-dirty at least one fields has been modified
  • ng-valid The structure content is valid
  • ng-invalid The structure content isn't valid
  • ng-substantial key One key for every approval. Model: ng-legitimate required, helpful when there are mutiple thing that must be validated
  • ng-invalid-key Example: ng-invalid-required

The classes are expelled if the esteem they speak to is false.

Example

Apply styles for unmodified (perfect) shapes, and for changed forms:

<style>
form.ng-perfect {
    foundation shading: lightblue;
}
form.ng-filthy {
    foundation shading: pink;
}
</style>
Try it Yourself »