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.