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

Question

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

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

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

Answer 1

无需编写自定义指令。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/

Answer 2

如果您想输入所需的输入（如果写入了其他输入）：

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

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

问候。

Answer 3

对于 Angular2

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

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

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

Answer 6

对于角 2

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