如何在AngularJS中有条件地要求表单输入?

假设我们正在用AngularJS构建一个地址簿应用程序(虚构的例子)。

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

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

172560 次浏览
小开
最佳答案

没有必要编写自定义指令。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/

小开

如果你想输入一个要求，如果other被写入:

   <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 (version 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' />
小开

对于Angular 2

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

提交答案