如何通过AngularJS有条件地要求表单输入？

Question

假设我们正在使用AngularJS构建一个地址簿应用程序(人为的例子).

我们有一个联系人表单,其中包含电子邮件和电话号码的输入,我们想要一个或另一个,但不是两个:我们只希望输入为空或无效时email需要phone输入,反之亦然.

Angular有一个required指令,但从文档中不清楚如何在这种情况下使用它.那么我们如何才能有条件地要求表格领域呢？写一个自定义指令？

Answer 1

没有必要编写自定义指令.Angular的文档很好但不完整.实际上,有一个ngRequired带有Angular表达式的指令.

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

这是一个更完整的例子:http://jsfiddle.net/uptnx/1/

Answer 2

如果你想要写一个输入所需的输入:

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

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

问候.

Answer 3

很简单,您可以使用角度验证,如:

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

您现在只能在一个文本字段中填充该值.您可以填写姓名或姓氏.通过这种方式,您可以在AngularJs中使用条件必需填充.

Answer 4

对于Angular2

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