如何有条件地要求使用 AngularJS 进行表单输入？答案

【问题标题】：How can I conditionally require form inputs with AngularJS?如何有条件地要求使用 AngularJS 进行表单输入？
【发布时间】：2012-11-08 02:28:06
【问题描述】：

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

我们有一个联系人表单，其中包含电子邮件和电话号码的输入，我们希望要求一个或另一个，但不是两者：我们只需要如果phone 输入为空或无效，则需要email 输入，反之亦然。

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

【问题讨论】：

标签： forms validation angularjs

【解决方案1】：

无需编写自定义指令。 Angular 的文档很好，但并不完整。 In fact，有一个名为 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/

【讨论】：

应该没问题吧？只需相应地更新条件。如果您再解释一下您需要什么，我（或这里的其他人）将能够向您展示:)
附带说明，您还可以使用函数并在那里执行更复杂的逻辑。
此功能现已记录在案：docs.angularjs.org/api/ng/directive/ngRequired

【解决方案2】：

如果你想输入需要的输入，如果有其他的：

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

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

问候。

【讨论】：

【解决方案3】：

对于 Angular2

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

【讨论】：

编辑：这会引发控制台错误“ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。”当我检查单选按钮时，我正在应用它，但它似乎确实进行了条件验证。
Angular2+ 在这个问题上没有被标记。因为它本质上是一个不同的框架，所以这个答案是不相关的。
@isherwood 你是对的。我添加它是因为我在谷歌搜索时在这里结束了。如果它被否决或引起争议，我会删除它。
@Iaffuste 您可以发布并回复 Angular2+ 的新问题，以方便人们调查此问题。无论如何 +1 =)

【解决方案4】：

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

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

【讨论】：

仍然可以同时填写这两个字段，不是吗？
是的，用户可以同时填写两个字段，在这种情况下，如果用户填写一个字段，另一个字段不是必需的

【解决方案5】：

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

Angular2 或以上版本

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

【讨论】：

【解决方案6】：

对于 Angular 2

<input [(ngModel)]='email' [required]='!phone' />
<input [(ngModel)]='phone' [required]='!email' />

【讨论】：