AngularJS form directive

AngularJS referenshandbok

Definition and usage

AngularJS modification <form> The default behavior of the element.

Form elements within the 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 En eller flera fält har ändrats
  • $invalid Formulärbekvämt är ogiltigt
  • $valid Formulärbekvämt är giltigt
  • $subscribed Form has been submitted

Each state value represents a boolean value, for true Or false.

If the action attribute is not specified, AngularJS form will prevent the default action, that is, 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>

Prova det själv

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>

Prova det själv

syntaks

<form name="formname</form>

Genom att använda name värden för att hänvisa till formuläret.

CSS-klasser

Formulär inom AngularJS-applikationer har tilldelats vissa klasser. Dessa klasser kan användas för att ställa in formulärens stil baserat på dess tillstånd.

Följande klasser har lagts till:

  • ng-pristine Inga fält har ännu ändrats
  • ng-dirty En eller flera fält har ändrats
  • ng-valid Formulärbekvämt är giltigt
  • ng-invalid Formulärbekvämt är ogiltigt
  • ng-valid-key Validera varje nyckel varje gång. Till exempel:ng-valid-requiredär mycket användbart när det finns mer än en sak som måste valideras
  • ng-invalid-key Till exempel:ng-invalid-required

Om värdet som klassen representerar är falseOm så är fallet, kommer dessa klasser att tas bort.

AngularJS referenshandbok