Apa perbedaan antara yang dibutuhkan dan yang diperlukan?

278

Apa perbedaan antara requireddan ng-required(validasi formulir)?

angularjs required TidharPeer
sumber

Jawaban:

421

Elemen formulir AngularJS mencari requiredatribut untuk melakukan fungsi validasi. ng-requiredmemungkinkan Anda untuk menetapkan requiredatribut tergantung pada tes boolean (misalnya, hanya memerlukan bidang B - katakanlah, nomor siswa - jika bidang A memiliki nilai tertentu - jika Anda memilih "siswa" sebagai pilihan )

Sebagai contoh, <input required>dan <input ng-required="true">pada dasarnya hal yang sama

Jika Anda bertanya-tanya mengapa demikian, (dan bukan hanya membuat <input required="true">atau <input required="false">), hal ini disebabkan oleh keterbatasan HTML - requiredatribut tidak memiliki nilai yang terkait - kehadirannya hanya berarti (sesuai standar HTML) sehingga elemen tersebut diperlukan - jadi angular membutuhkan cara untuk mengatur / membatalkan nilai yang diperlukan ( required="false"akan menjadi HTML yang tidak valid)

Tiago Roldão
sumber
Bagaimana saya bisa menghapus ng-diperlukan masing-masing? Karena saya mencoba beberapa metode jquery tanpa hasil
themhz
28
Saya tidak yakin saya mengerti pertanyaannya .. Dalam praktiknya, Anda tidak pernah menggunakan ng-required = "true", melainkan ng-required = "scopedVariable" atau ng-required = "scopeTruthTest ()", dan nilai dari variabel / fungsi menentukan apakah elemen tersebut diperlukan. Jangan pernah menggunakan jquery untuk mengacaukan hal-hal ini di aplikasi sudut, atau Anda akan mendapatkan hasil yang tidak terduga!
Tiago Roldão
Layak disebutkan bahwa ng-diperlukan menampilkan pesan kesalahan gaya tooltip standar yang mengatakan 'bidang ini diperlukan', yang tidak selalu diinginkan. Saya mencari cara untuk mematikannya
Adam Spence
2
Sebenarnya tidak. Tidak yakin, tapi saya pikir yang Anda maksud adalah validasi html5, yang dibuat secara otomatis oleh sebagian besar browser modern. Jika Anda ingin mengambil kontrol atas ini (menonaktifkan apa browser tidak) Anda dapat menambahkan novalidate atribut: <form method="post" action="/foo" novalidate>. Sekali lagi, ini adalah atribut html5, tidak terkait dengan angularJS.
Tiago Roldão
Saya akan berharap bahwa ketika ng-requiredmenunjuk ke variabel lingkup / pengontrol, Angular memantaunya untuk perubahan dan mengatur atribut yang diperlukan. Sedangkan dalam hal requiredatribut HTML sederhana Anda tidak memiliki fleksibilitas semacam itu. Tidak? Dan sementara kita berada di topik yang sama, bagaimana ng-attr-required? Apakah persis sama dengan ng-required?
AsGoodAsItGets
78

Saya ingin membuat addon untuk jawaban tiago :

Misalkan Anda menyembunyikan elemen menggunakan ng-showdan menambahkan requiredatribut yang sama:

<div ng-show="false">
    <input required name="something" ng-model="name"/>
</div>

akan melempar kesalahan seperti:

Kontrol formulir yang tidak valid dengan nama = '' tidak dapat fokus

Ini karena Anda tidak dapat memaksakan requiredvalidasi pada hiddenelemen. Menggunakan ng-requiredmembuatnya lebih mudah untuk menerapkan validasi yang diperlukan secara kondisional yang luar biasa !!

Saya_Debug_Semuanya
sumber
13
Jelas merupakan tip yang bagus, dan Anda juga dapat menggunakan ng-ifalih-alih ng-show/ ng-hideuntuk menghindari masalah potensial itu.
jkjustjoshing
1
Ini harus menjadi jawaban yang diterima. Jika Anda memiliki elemen tersembunyi (ng-show = "false"), ada perbedaan antara ng-required = "true" dan 'diperlukan' seperti yang dijelaskan dalam jawaban ini, dan kami masuk ke air panas karena perbedaan ini.
Ivan Krivyakov
17

The atribut HTML required="required" adalah pernyataan memberitahu browser bidang ini diperlukan agar bentuk yang akan berlaku. ( required="required"adalah bentuk XHTML, hanya menggunakan requiredyang setara)

The sudut atribut ng-required="yourCondition" berarti 'isRequired (yourCondition)' dan set atribut HTML dinamis untuk Anda tergantung pada kondisi Anda.

Perhatikan juga bahwa versi HTML membingungkan , tidak mungkin untuk menulis sesuatu yang kondisional seperti required="true"atau required="false", hanya kehadiran atribut yang penting (present berarti true)! Di sinilah Angular membantu Anda ng-required.

Christophe Roussy
sumber
Ya sayangnya browser tidak memungkinkan untuk membuat benar / salah, mungkin dianggap terlalu teknis ...
Christophe Roussy