假设我们正在用AngularJS构建一个地址簿应用程序(虚构的例子)。
我们有一个联系人表单,其中有电子邮件和电话号码的输入,我们希望只需要其中一个,而不是两个:我们只希望在电话输入为空或无效时需要电子邮件输入,反之亦然。
Angular有一个required指令,但是从文档中看不清楚在这种情况下如何使用它。那么我们如何有条件地要求表单字段呢?写一个自定义指令?
假设我们正在用AngularJS构建一个地址簿应用程序(虚构的例子)。
我们有一个联系人表单,其中有电子邮件和电话号码的输入,我们希望只需要其中一个,而不是两个:我们只希望在电话输入为空或无效时需要电子邮件输入,反之亦然。
Angular有一个required指令,但是从文档中看不清楚在这种情况下如何使用它。那么我们如何有条件地要求表单字段呢?写一个自定义指令?
当前回答
在AngularJS(版本1.x)中,有一个内置指令ngrerequired
<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' />
对于Angular2
<input type='email'
[(ngModel)]='contact.email'
[required]='!contact.phone' >
简单,你可以像这样使用角验证:
<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中使用条件必填。
如果你想输入一个要求,如果other被写入:
<input type='text'
name='name'
ng-model='person.name'/>
<input type='text'
ng-model='person.lastname'
ng-required='person.name' />
的问候。
没有必要编写自定义指令。Angular的文档很好,但并不完整。事实上,有一个叫ngrerequired的指令,它接受一个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/