Bagaimana saya bisa meminta input formulir dengan AngularJS secara kondisional?

234

Misalkan kita sedang membangun aplikasi buku alamat (contoh buatan) dengan AngularJS.

Kami memiliki formulir untuk kontak yang memiliki input untuk email dan nomor telepon, dan kami ingin meminta satu atau yang lain , tetapi tidak keduanya : Kami hanya ingin emailinput diperlukan jika phoneinput kosong atau tidak valid, dan sebaliknya.

Angular memiliki requiredarahan, tetapi tidak jelas dari dokumentasi bagaimana menggunakannya dalam kasus ini. Jadi bagaimana kita secara kondisional membutuhkan bidang formulir? Tulis arahan khusus?

forms validation angularjs Christian Smith
sumber

463

Tidak perlu menulis arahan khusus. Dokumentasi Angular bagus tapi tidak lengkap. Bahkan , ada arahan yang disebut ngRequired, yang mengambil ekspresi Angular.

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='[email protected]'
       ng-required='!contact.phone' />

<input type='text'
       ng-model='contact.phone'             
       placeholder='(xxx) xxx-xxxx'
       ng-required='!contact.email' />

Berikut ini contoh yang lebih lengkap: http://jsfiddle.net/uptnx/1/

Christian Smith
sumber

5

Seharusnya tidak menjadi masalah, kan? Perbarui kondisional yang sesuai. Jika Anda menjelaskan apa yang Anda butuhkan lebih banyak, saya (atau orang lain di sini) akan dapat menunjukkan kepada Anda :)

Puce

1

Sebagai catatan, Anda juga dapat menggunakan fungsi dan melakukan logika yang lebih kompleks di sana.

Leandro Zubrezki

1

Fitur ini sekarang didokumentasikan

bjunix

25

jika Anda ingin memasukkan input yang diperlukan jika yang lain ditulis:

   <input type='text'
   name='name'
   ng-model='person.name'/>

   <input type='text'
   ng-model='person.lastname'             
   ng-required='person.name' />

Salam.

David Gonzalez
sumber

14

Sederhana Anda dapat menggunakan validasi sudut seperti:

 <input type='text'
   name='name'
   ng-model='person.name'
   ng-required='!person.lastname'/>

   <input type='text'
   name='lastname'
   ng-model='person.lastname'             
   ng-required='!person.name' />

Anda sekarang dapat mengisi nilai hanya dalam satu bidang teks. Anda bisa mengisi nama atau nama belakang. Dengan cara ini Anda dapat menggunakan isi wajib bersyarat dalam AngularJs.

Bipin Shilpakar
sumber

Kita masih bisa mengisi kedua bidang, bukan?

myTerminal

ya pengguna dapat mengisi kedua bidang, juga dalam kondisi ini jika pengguna mengisi satu bidang, bidang lainnya tidak wajib

Bipin Shilpakar

13

Untuk Angular2

<input type='email' 
    [(ngModel)]='contact.email'
    [required]='!contact.phone' >

nafsu birahi
sumber

EDIT: Ini melempar kesalahan konsol "ExpressionChangedAfterItHasBeenCheckedError: Expression telah berubah setelah diperiksa." ketika saya memeriksa tombol radio saya menerapkan ini, tetapi tampaknya melakukan validasi bersyarat.

Eric Soyke

4

Angular2 + tidak ditandai pada pertanyaan ini. Karena pada dasarnya kerangka kerja yang berbeda, jawaban ini tidak relevan.

isherwood

1

@ Pioneerwood Anda benar. Saya menambahkannya karena saya berakhir di sini ketika mencari Google untuk itu. Saya akan menghapusnya jika dibatalkan atau kontroversial.

laffuste

@Iustuste Anda dapat memposting dan membalas pertanyaan baru untuk Angular2 + agar mudah bagi orang-orang yang melihat ini. +1 tetap =)

arjel

Bagaimana saya bisa meminta input formulir dengan AngularJS secara kondisional?

Jawaban: