验证单选按钮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=预览

Answer 1

尝试使用ng-required="!color"。这样一来，只有在未设置该值时才需要该字段。如果设置了一个值，那么必填项将被删除，它将通过验证。

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

这是一个更新的插件，演示了表单现在可以正确验证：http
://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview

e-cloud的答案很简单，不需要其他指令。我建议大家尽可能使用这种方法。保留此答案，因为它确实提供了可行的html" target="_blank">解决方案，并演示了ng-required指令的使用。