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

Posted 2023-02-22

【中文标题】如何有条件地要求使用 AngularJS 进行表单输入？

【英文标题】：How can I conditionally require form inputs with AngularJS?

【发布时间】：2012-11-08 02:28:06

【问题描述】：

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

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

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

【参考方案1】：

无需编写自定义指令。 Angular 的文档很好，但并不完整。 In fact，有一个名为 ngRequired 的指令，它采用 Angular 表达式。

<input type='email'
       name='email'
       ng-model='contact.email' 
       placeholder='[e-mail]'
       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='[e-mail]'
       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='[e-mail]'
       [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' />