validation单选buttonAngularJS
这似乎应该是相当容易的，但我没有find答案。 我有一个表格，我需要validation一个广播组的select。 我尝试使用单选button上的'required'属性，但是当表单被validation时，它会抱怨，除非所有的单选button被选中（这在devise中是不可能的）。
在AngularJS中validation广播组select的正确方法是什么？
<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中的提交button显示行为。
尝试使用ng-required="!color" 。 这使得该字段只有在没有设置值时才是必需的。 如果设置了一个值，那么需要被删除，它将通过validation。
<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，它演示了表单现在可以正确validation： http ://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview
更新
圣斯科特的答案很简单，不需要额外的指令。 我build议大家尽可能使用这种方法。 留下这个答案在这里，因为它提供了一个工作的解决scheme，并演示了ng-required指令的使用。
我认为你需要的是为收音机组添加一个名字，因为收音机input需要一个名字来确定它属于哪个名字，下面的链接在没有ng-required（接受的答案）的情况下进行validation，
<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/>
使用指令的替代解决scheme。 Firefox中接受的答案对我无效（v 33.0）。
这个想法是在具有特定类名的所有无线电设备上将所需属性设置为假。
- jQuery被添加，因为我有问题的jqlite删除属性function。
- 我尽可能地复制原来的掠夺者。
http://plnkr.co/edit/nbzjQqCAvwNmkbLW5bxN?p=preview
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Example - example-radio-input-directive-production</title> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script> </head> <body ng-app="radioExample"> <script> angular.module('radioExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.myObject= {}; $scope.specialValue = { "id": "12345", "value": "green" }; $scope.submitForm = function() { alert('valid'); } }]) .directive('colorChoice', function() { return { restrict: 'E', template: '<div ng-repeat="c in colors"><input class="colorClass" type="radio" value={{c}} ng-model="myObject.color" required />{{c}}</div>', link: function(scope, element, attrs) { scope.colors = ['Red', 'Green', 'Blue']; element.on('change', function(){ $(".colorClass").attr("required", false); }); } } }); </script> <form name="myForm" ng-submit="submitForm()" ng-controller="ExampleController"> <color-choice></color-choice> <tt>color = {{myObject.color | json}}</tt><br/> <button type="submit">Submit</button> </form> </body> </html>
