AngularJS form directive

Definition and usage

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

Forms within AngularJS applications are given certain properties. These properties describe the current state of the form.

The form has the following states:

• $pristine No fields have been modified
• $dirty Yksi tai useampi kenttä on muutettu
• $invalid Lomakkeen sisältö ei ole kelvollinen
• $valid Lomakkeen sisältö on kelvollinen
• $subscribed Form has been submitted

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

If the action attribute is not specified, the form in AngularJS 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 state' of this form will not be considered 'true':

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

Kokeile itse

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>

Kokeile itse

Syntax

<form name="formname</form>

Käyttämällä name arvon avulla viitataan lomakkeeseen.

CSS-luokat

AngularJS-sovelluksessa oleva lomake on saanut tiettyjä luokkia. Näitä luokkia voidaan käyttää asettamaan lomakkeen tyylit sen tilan mukaan.

Lisättiin seuraavat luokat:

• ng-pristine Ei ole muutettuja kenttiä
• ng-dirty Yksi tai useampi kenttä on muutettu
• ng-valid Lomakkeen sisältö on kelvollinen
• ng-invalid Lomakkeen sisältö ei ole kelvollinen
• ng-valid-key Tarkista yksi avain kerrallaan. Esimerkiksi:ng-valid-requirederittäin hyödyllinen, kun on useita pakollisia tarkistuksia
• ng-invalid-key Esimerkiksi:ng-invalid-required

Jos luokan edustama arvo on falseJos nämä luokat poistetaan.