Forms 如何有条件地使用AngularJS要求表单输入？

假设我们正在用AngularJS构建一个地址簿应用程序（人为的例子）

我们有一个联系人表单，其中包含电子邮件和电话号码的输入，我们希望要求一个或另一个，但不是两个：我们只希望在

电话

输入为空或无效时需要

电子邮件

输入，反之亦然

---

Angular有一个

必需的

指令，但文档中不清楚如何在这种情况下使用它。那么，我们如何有条件地要求表单字段呢？编写自定义指令？

无需编写自定义指令。Angular的文档很好，但不完整，有一个指令名为

ngRequired

，它采用角度表达式

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

---

这里有一个更完整的示例：

如果您想在编写其他内容时输入所需的内容：

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

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

---

注意。

简单您可以使用角度验证，如：

 <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中使用条件必需的填充。

用于Angular2

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

在AngularJS（1.x版）中，有一个内置指令

ngRequired

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

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

角度2或以上

<input type='email'
       name='email'
       [(ngModel)]='user.email' 
       placeholder='your@email.com'
       [required]='!user.phone' />

<input type='text'
       [(ngModel)]='user.phone'             
       placeholder='(xxx) xxx-xxxx'
       [required]='!user.email' /> 

---

用于角度2

这应该不是问题，对吧？只需相应地更新条件。如果你再多解释一下你需要什么，我（或这里的其他人）可以向你展示：）作为旁注，你也可以使用一个函数，在那里做更复杂的逻辑。这个功能现在已经被证明了：一个人仍然可以填写两个字段，不是吗？是的，用户可以填写两个字段，如果用户填写一个字段，也可以在这种情况下填写，另一个字段不是mandatoryEDIT：这会引发控制台错误“ExpressionChangedTerithasBeenCheckedError:Expression在选中后已更改”。当我选中单选按钮时，我正在应用此字段，但它似乎确实执行了条件验证。Angular2+未标记此问题。因为它本质上是一个不同的框架，所以这个答案与此无关。@isherwood您是对的。我添加它是因为我在谷歌上搜索时在这里结束了。如果它被否决或引起争议，我将删除它。@Iaffuste您可以为Angular2+发布并回答一个新问题，以便于人们研究+1=）