Instruksi form AngularJS

Definisi dan penggunaan

Modifikasi AngularJS <form> Bentuk kelakuan baku elemen.

Formulir di dalam aplikasi AngularJS diberikan beberapa atribut. Atribut ini mendeskripsikan status saat ini formulir.

Formulir memiliki status berikut:

  • $pristine Belum diubah apapun bidang
  • $dirty Satu atau lebih field telah diubah
  • $invalid Konten formulir tidak valid
  • $valid Konten formulir valid
  • $subscribed Formulir telah disubmit

Nilai dari setiap status mewakili nilai boolean, untuk true atau false.

Jika tidak disebutkan atribut action, formulir AngularJS akan mencegah operasi baku, yaitu mengirim formulir ke server.

Contoh

Contoh 1

Jika bidang masukan yang diperlukan kosong, status 'berlaku' formulir ini tidak dianggap 'true':

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<p>Status keberlanjutan formulir adalah:</p>
<h1>{{myForm.$valid}}</h1>

Coba sendiri

Contoh 2

Aplikasikan gaya ini untuk formulir yang belum diubah (asli) dan formulir yang diubah:

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

Coba sendiri

Grammar

<form name="formname</form>

Dengan menggunakan name nilai properti untuk merujuk ke formulir.

Kelas CSS

Formulir di dalam aplikasi AngularJS diberikan beberapa kelas. Kelas ini dapat digunakan untuk menata gaya formulir berdasarkan keadaannya.

Ditambahkan kelas berikut:

  • ng-pristine Tidak ada field yang belum diubah
  • ng-dirty Satu atau lebih field telah diubah
  • ng-valid Konten formulir valid
  • ng-invalid Konten formulir tidak valid
  • ng-valid-key Verifikasi satu kunci dalam setiap kali. Contoh:ng-valid-requiredsangat berguna saat ada lebih dari satu item yang harus divalidasikan.
  • ng-invalid-key Contoh:ng-invalid-required

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