验证单选按钮AngularJS

Question

这似乎应该相当容易,但我找不到答案.我有一个表单,我需要验证是否已从广播组中进行选择.我尝试在单选按钮上使用'required'属性,但是当表单被验证时,它会抱怨,除非选择了所有的单选按钮(这在设计上是不可能的).

在AngularJS中验证无线电组选择的正确方法是什么？

<form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController">
  <input type="radio" ng-model="color" value="red" required>  Red <br/>
  <input type="radio" ng-model="color" value="green" required> Green <br/>
  <input type="radio" ng-model="color" value="blue" required> Blue <br/>
  <tt>color = {{color | json}}</tt><br/>
  <button type="submit">Submit</button>
</form>

单击Plnkr中的提交按钮可显示该行为.

http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=preview

Answer 1

尝试使用ng-required="!color".这使得只有在未设置值时才需要该字段.如果设置了值,则删除required并将通过验证.

<input type="radio" ng-model="color" value="red" ng-required="!color">  Red <br/>
<input type="radio" ng-model="color" value="green" ng-required="!color"> Green <br/>
<input type="radio" ng-model="color" value="blue" ng-required="!color"> Blue <br/>

这是一个更新的plunker,它表明表单现在可以正确验证:http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx？p = preview

更新

e-cloud的答案很简单,不需要额外的指令.我建议大家尽可能使用这种方法.在这里留下这个答案,因为它提供了一个可行的解决方案并演示了ng-required指令的使用.

Answer 2

我认为你需要的是为无线电组添加一个名称,因为无线电输入需要一个名称来确定它属于哪个,下面的链接工作验证没有ng-required(接受的答案)

<input type="radio" name='group' ng-model="color" value="red" required>  Red <br/>
<input type="radio" name='group' ng-model="color" value="green" required> Green <br/>
<input type="radio" name='group' ng-model="color" value="blue" required> Blue <br/>

http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview