AngularJS ile form girişlerini nasıl şartlı olarak isteyebilirim?


234

AngularJS ile bir adres defteri uygulaması (uyumlu örnek) oluşturduğumuzu varsayalım.

E-posta ve telefon numarası için girişleri olan kişiler için bir formumuz var ve ikisinden birine gerek duymak istiyoruz , ancak her ikisini birden istemiyoruz: emailGirişin yalnızca phonegiriş boş veya geçersizse gerekli olmasını istiyoruz .

Açısal bir requireddirektif vardır, ancak bu durumda belgenin nasıl kullanılacağı açık değildir. Peki şartlı olarak bir form alanına nasıl ihtiyaç duyabiliriz? Özel bir direktif mi yazıyorsunuz?

Yanıtlar:


463

Özel bir yönerge yazmanıza gerek yoktur. Angular'ın belgeleri iyidir ancak tam değildir. Aslında , ngRequiredAçısal bir ifade alan bir direktif var .

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='your@email.com'
       ng-required='!contact.phone' />

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

İşte daha eksiksiz bir örnek: http://jsfiddle.net/uptnx/1/


5
Sorun olmamalı, değil mi? Şartları uygun şekilde güncelleyin. Biraz daha neye ihtiyacınız olduğunu açıklarsanız, ben (veya başka bir kişi) size gösterebilirim :)
Puce

1
Yan not olarak, bir işlev de kullanabilir ve orada daha karmaşık bir mantık yapabilirsiniz.
Leandro Zubrezki

1
Bu özellik şu ana kadar belgelenmiştir: docs.angularjs.org/api/ng/directive/ngRequired
bjunix

25

eğer başka bir yazı yazılırsa gerekli bir girdi koymak istiyorsanız:

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

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

Saygılarımızla.


14

Basit açısal doğrulama kullanabilirsiniz gibi:

 <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' /> 

Artık değeri yalnızca bir metin alanına doldurabilirsiniz. Ad veya soyadı doldurabilirsiniz. Bu şekilde AngularJ'lerde koşullu gerekli dolguyu kullanabilirsiniz.


Her iki alanı da doldurabilirsiniz, değil mi?
myTerminal

evet kullanıcı her iki alanı da doldurabilir, bu durumda da kullanıcı bir alanı doldurursa, diğer alan zorunlu değildir
Bipin Shilpakar 18:17

13

Açısal2 için

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

EDIT: Bu bir konsol hatası atıyor "ExpressionChangedAfterItHasBeenCheckedError: İfade kontrol edildikten sonra değişti." radyo düğmesini kontrol ettiğimde bunu uyguluyorum, ancak koşullu doğrulama yapıyor gibi görünüyor.
Eric Soyke

4
Angular2 + bu soruda etiketlenmemiştir. Aslında farklı bir çerçeve olduğundan, bu cevap ilgili değildir.
isherwood

1
@isherwood haklısın. Ben ekledim çünkü bunun için googling yaparken burada sona erdi. İndirilirse veya tartışılırsa silerim.
laffuste

@Iaffuste, Angular2 + için yeni bir soru gönderebilir ve bu soruyu cevaplayan kişilerin daha kolay olmasını sağlayabilir. Yine de +1 =)
arjel
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.