AngularJS form directive

Definition and usage

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

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

The form has the following states:

  • $pristine No field has been modified
  • $dirty Satu atau lebih medan telah diubahsuai
  • $invalid Kandungan borang adalah tak sah
  • $valid Kandungan borang adalah sah
  • $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 operation, 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>

Cuba sendiri

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>

Cuba sendiri

Sintaks

<form name="formname</form>

melalui penggunaan name nilai properti untuk merujuk kepada borang.

Kelas CSS

Borang dalam aplikasi AngularJS dihadapi beberapa kelas. Kelas ini boleh digunakan untuk menetapkan gaya borang berdasarkan keadaannya.

Kelas berikut telah ditambahkan:

  • ng-pristine Tiada medan belum diubahsuai
  • ng-dirty Satu atau lebih medan telah diubahsuai
  • ng-valid Kandungan borang adalah sah
  • ng-invalid Kandungan borang adalah tak sah
  • ng-valid-key Semasa mengesahkan setiap kunci. Contoh:ng-valid-requiredberpenting bagi mengesahkan lebih daripada satu item.
  • ng-invalid-key Contoh:ng-invalid-required

Jika nilai yang diwakili oleh kelas adalah falseJika kelas ini dihapuskan.