验证单选按钮AngularJS

Question 1

这似乎应该很容易，但是我没有找到答案。我有一个表格，需要核实是否已从广播组中进行选择。我尝试在单选按钮上使用'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=预览

Question 2

尝试使用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的答案很简单，不需要其他指令。我建议大家尽可能使用这种方法。保留此答案，因为它确实提供了可行的解决方案，并演示了ng-required指令的使用。

Question 3

我认为您需要为单选组添加一个名称，对于单选输入需要一个名称来确定其所属的名称，下面的链接无需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

Question 4

使用指令的替代解决方案。在Firefox（v 33.0）中，已接受的答案对我不起作用。

想法是在更改时，在具有特定类名称的所有无线电中将required属性设置为false。

添加jQuery是因为我在使用jqlite remove属性功能时遇到麻烦。
我尽可能从原始的竖笛复制。

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>

Question 5

就我而言，我正在使用angularJS材质库，required并向<md-radio=group>tag添加属性可以达到目的。