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

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