Di AngularJS, apa perbedaan antara ng-pristine dan ng-dirty?

109

Apa perbedaan antara ng-pristinedan ng-dirty? Tampaknya Anda dapat memiliki keduanya untuk menjadi true:

$scope.myForm.$pristine = true; // after editing the form
angularjs sinergis
sumber

Jawaban:

214

The ng-dirtykelas memberitahu Anda bahwa formulir telah dimodifikasi oleh pengguna, sedangkan ng-pristinekelas memberitahu Anda bahwa bentuk belum diubah oleh pengguna. Jadi ng-dirtydan ng-pristinedua sisi dari cerita yang sama.

Kelas ditetapkan di bidang apa pun, sedangkan formulir memiliki dua properti, $dirtydan $pristine.

Anda dapat menggunakan $scope.form.$setPristine()fungsi untuk mengatur ulang formulir ke keadaan asli (harap dicatat bahwa ini adalah fitur AngularJS 1.1.x).

Jika Anda menginginkan $scope.form.$setPristine()perilaku -ish bahkan di cabang 1.0.x AngularJS, Anda perlu menggulung solusi Anda sendiri (beberapa yang cukup bagus dapat ditemukan di sini ). Pada dasarnya, ini berarti mengulangi semua bidang formulir dan menyetel $dirtybenderanya ke false.

Semoga ini membantu.

Golo Roden
sumber
2
Jawaban yang bagus, tetapi mengapa 2 kelas, jika keduanya adalah dua sisi dari cerita yang sama? Seperti yang saya katakan, Anda dapat memiliki keduanya benar atau salah.
sinergis
6
Itu benar, tapi saya rasa (takut) bahwa ini adalah pertanyaan yang hanya bisa dijawab oleh pengembang AngularJS. Dengan kata lain: Saya tidak tahu.
Golo Roden
2
@synergetic itu seperti ng-show dan ng-hide pada dasarnya, satu sudah cukup tapi kami punya dua tanpa alasan yang terlihat
Labib Ismaiel
1
@synergetic ng-show secara semantik lebih sederhana untuk dipahami, dan membutuhkan satu langkah kognitif yang lebih sedikit untuk dipahami daripada! ng-hide. otak Anda perlu melakukan langkah ekstra itu dan dengan demikian Anda kemungkinan besar akan memperkenalkan bug
Damian Green
4
Saya pikir itu tergantung pada niat Anda: Terkadang, Anda ingin menampilkan hal-hal tambahan mengingat situasi tertentu, dan terkadang Anda perlu menyembunyikan beberapa hal dalam situasi tertentu. Bergantung pada kasus penggunaan Anda, keduanya mungkin sesuai. Tentu saja, meski secara teknis sama, sengaja tidak.
Golo Roden
41

pristine memberi tahu kami jika suatu bidang masih perawan, dan dirty memberi tahu kami jika pengguna telah mengetik apa pun di bidang terkait:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<form ng-app="" name="myForm">
  <input name="email" ng-model="data.email">
  <div class="info" ng-show="myForm.email.$pristine">
    Email is virgine.
  </div>
  <div class="error" ng-show="myForm.email.$dirty">
    E-mail is dirty
  </div>
</form>
Luaskan cuplikan

Bidang yang telah mendaftarkan peristiwa keydown tunggal tidak lagi perawan (tidak lebih murni) dan oleh karena itu kotor selamanya.

Meziane
sumber
Bagaimana kalau menempel dengan mouse?
Mihai Răducanu
2
Ini tidak menjelaskan apapun. Pertanyaannya adalah 'apa bedanya'. Tidak ada penjelasan tentang apa yang kamu maksud dengan perawan dan apa yang kamu maksud dengan kotor.
hogan
34

Kedua arahan tersebut jelas memiliki tujuan yang sama, dan meskipun tampaknya keputusan tim sudut untuk memasukkan keduanya mengganggu prinsip KERING dan menambah muatan laman, masih agak praktis untuk memiliki keduanya. Lebih mudah untuk mengatur gaya elemen input Anda karena Anda memiliki .ng-pristine dan .ng-dirty yang tersedia untuk ditata dalam file css Anda. Saya kira ini adalah alasan utama untuk menambahkan kedua arahan.

zszep
sumber
19
1 untuk fakta .ng-pristinedan .ng-dirtyizinkan gaya css yang berbeda - ini tampaknya alasan paling benar di balik pengulangan
Steve Lorimer
10

Seperti yang telah dikemukakan pada jawaban sebelumnya, ng-pristineuntuk menunjukkan bahwa bidang tersebut belum dimodifikasi, sedangkanng-dirty untuk memberitahu sudah dimodifikasi. Mengapa membutuhkan keduanya?

Katakanlah kita memiliki formulir dengan alamat telepon dan email di antara bidang-bidang tersebut. Baik telepon atau email diperlukan, dan Anda juga harus memberi tahu pengguna ketika mereka mendapatkan data yang tidak valid di setiap bidang. Ini dapat dicapai dengan menggunakan ng-dirtydan ng-pristinebersama - sama:

<form name="myForm">
    <input name="email" ng-model="data.email" ng-required="!data.phone">
    <div class="error" 
         ng-show="myForm.email.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.email.$invalid && myForm.email.$dirty">
        E-mail is invalid
    </div>

    <input name="phone" ng-model="data.phone" ng-required="!data.email">
    <div class="error" 
         ng-show="myForm.phone.$invalid && 
                  myForm.email.$pristine &&
                  myForm.phone.$pristine">Phone or e-mail required</div>
    <div class="error" 
         ng-show="myForm.phone.$invalid && myForm.phone.$dirty">
        Phone is invalid
    </div>
</form>
sandst1
sumber
1

ng-murni ($ murni)

Boolean True jika form / input belum digunakan ( belum diubah oleh pengguna )

ng-kotor ($ kotor)

Boolean True jika form / input telah digunakan ( dimodifikasi oleh pengguna )

$ setDirty (); Menyetel formulir ke keadaan kotor. Metode ini bisa dipanggil untuk menambahkan kelas 'ng-dirty' dan menyetel formulir ke status kotor (kelas ng-dirty). Metode ini akan menyebarkan status saat ini ke formulir induk.

$ setPristine (); Menyetel formulir ke keadaan aslinya. Metode ini menyetel status $ pristine formulir ke true, status $ dirty ke false, menghapus kelas ng-dirty dan menambahkan kelas ng-pristine. Selain itu, ini menyetel status $ submit ke false. Metode ini juga akan menyebar ke semua kontrol yang terdapat dalam formulir ini.

Menyetel kembali formulir ke keadaan semula sering kali berguna saat kita ingin 'menggunakan kembali' formulir setelah menyimpan atau menyetel ulang.

Dhyan Mohandas
sumber