AngularJS - perbedaan antara murni / kotor dan tersentuh / tidak tersentuh

158

Panduan Pengembang AngularJS - Formulir memberi tahu ada banyak gaya dan arahan tentang formulir dan bidang. Untuk masing-masing, kelas CSS:

ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched

Apa bedanya pristine/dirty, dan touched/untouched?

angularjs Luis Masuelli
sumber
3
Ini sekarang ada dalam dokumentasi yang Anda tautkan, di bawah judul "Menggunakan kelas CSS".
Bernhard Hofmann
1
Anda benar :) Meskipun tampaknya agak baru (di samping kelas-kelas baru yang didefinisikannya)
Luis Masuelli

Jawaban:

220

Panduan Pengembang AngularJS - kelas CSS yang digunakan oleh AngularJS

  • @property {boolean} $ tak tersentuh Benar jika kontrol belum kehilangan fokus.
  • @property {boolean} $ menyentuh Benar jika kontrol telah kehilangan fokus.
  • @property {boolean} $ pristine Benar jika pengguna belum berinteraksi dengan kontrol.
  • @property {boolean} $ dirty Benar jika pengguna telah berinteraksi dengan kontrol.
Yuriy Rozhovetskiy
sumber
89

$pristine/ $dirtyMemberitahu Anda apakah pengguna benar - benar mengubah apa pun, sementara $touched/ $untouchedmemberi tahu Anda apakah pengguna hanya ada / dikunjungi .

Ini sangat berguna untuk validasi. Alasannya $dirtyadalah selalu menghindari menunjukkan tanggapan validasi sampai pengguna benar-benar mengunjungi kontrol tertentu. Tetapi, dengan hanya menggunakan $dirtyproperti, pengguna tidak akan mendapatkan umpan balik validasi kecuali mereka benar-benar mengubah nilainya. Jadi, suatu $invalidbidang masih tidak akan menampilkan permintaan kepada pengguna jika pengguna tidak mengubah / berinteraksi dengan nilai. Jika pengguna sepenuhnya mengabaikan bidang yang diperlukan, semuanya tampak OK.

Dengan Angular 1.3 dan ng-touched, Anda sekarang dapat menetapkan gaya tertentu pada kontrol segera setelah pengguna kabur, terlepas dari apakah mereka benar-benar mengedit nilai atau tidak.

Berikut adalah CodePen yang menunjukkan perbedaan dalam perilaku.

XML
sumber
Saya mencari cara untuk menghapus kesalahan validasi formulir. form. $ setPristine tidak melakukannya. Saya telah melihat formulir saran orang lain. $ SetUntouched, tetapi sepertinya ini tidak tersedia dalam beta 1,3 19 sudut, yang merupakan versi yang saya gunakan. Namun saya dapat memanggil form.field_name. $ SetUtouched, tetapi melakukan itu untuk semua bidang memberatkan, apakah ada cara yang lebih baik?
T. Rex
$setPristinecukup buat formulir un- $dirty. Saya pikir Anda mungkin mau form.setValidity(). Lihat beberapa jawaban bermanfaat pada posting ini .
XML
14

Dalam Pro Angular-6 buku dirinci seperti di bawah ini;

  • valid : Properti ini mengembalikan true jika konten elemen valid dan salah.

  • tidak valid : Properti ini mengembalikan true jika konten elemen tidak valid dan salah sebaliknya.

  • murni : Properti ini mengembalikan true jika konten elemen belum diubah.

  • kotor : Properti ini mengembalikan true jika konten elemen telah diubah .
  • tak tersentuh : Properti ini mengembalikan true jika pengguna belum mengunjungi elemen.
  • disentuh : Properti ini mengembalikan true jika pengguna telah mengunjungi elemen.
fgul
sumber
6

Perlu disebutkan bahwa properti validasi berbeda untuk formulir dan elemen formulir (perhatikan bahwa yang disentuh dan yang tidak tersentuh hanya untuk bidang):

Input fields have the following states:

$untouched The field has not been touched yet
$touched The field has been touched
$pristine The field has not been modified yet
$dirty The field has been modified
$invalid The field content is not valid
$valid The field content is valid

They are all properties of the input field, and are either true or false.

Forms have the following states:

$pristine No fields have been modified yet
$dirty One or more have been modified
$invalid The form content is not valid
$valid The form content is valid
$submitted The form is submitted

They are all properties of the form, and are either true or false.
Yvonne Aburrow
sumber