76                    

这似乎应该相当容易，但我找不到答案。我有一个表单，我需要验证是否已从广播组中进行选择。我尝试在单选按钮上使用'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                    

                       
改善这个问题                            
       

3答案 正确答案(好像不对)                

活跃的最老票                    
       
122                        

尝试使用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指令的使用。                        

  • 2                                    
    ng-required而不只是required做它。谢谢。 -  Spencer 2014年 7月10日20:46                                     
  • 3                                    
    ng-required="true"也有效。 -  chrisjlee 2016年 7月16日5:37                                     
  • 辉煌！谢谢。 -  Rod Hartzell 于 2016年9月2日19:25                                    
  • 这个解决方案不起作用，即使在提供的plnkr演示中也没有。 - 征服者 哈基于18年  2月3日在13:33                                    
  • 1                                    
    让我忘掉了@dmullings我一定很困惑。它确实像魅力一样工作！ - 征服者 哈基于18年  2月6日15:39                                    
       
92                        

我认为你需要的是为无线电组添加一个名称，因为无线电输入需要一个名称来确定它属于哪个，下面的链接工作验证没有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                        

  • 工作正常，组的名称是正确的单选按钮工作所必需的，特别是如果你有几个组的形式... -  PhiLho 2015年 4月28日在9:32                                    
  • 哪个版本的角度开始工作？ -  CilliéMalan2015年 8月12日11:08                                    
  • @CilliéMalan，我想它总是以这种方式工作。至少从1.2。 -  电子云 2015年8月12日13:19                                    
  • 2                                    
    值得注意的是，无论选择哪个选项，单选按钮组都被视为有效，除非组中的至少一个单选按钮具有该ng-model属性。 -  罗伯特希克曼2015年 10月13日19:10                                    
  • 另一件需要注意的是，这并不能解决人们想要绑定$touched或$dirty属性的问题ng-model，但是有一种解决方法（至少对于$dirty）ng-form可以嵌套和引用。在这里看到类似的问题 - stackoverflow.com/questions/22181462 / ... -  jamiebarrow 2016年 7月25日在13:29                                    
       
0                        

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

我们的想法是在所有具有特定类名称的无线电上将所需属性设置为false。                        

  • jQuery被添加，因为我遇到了jqlite删除属性函数的问题。

  • 我从原始的plunker中尽可能地复制了。

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>
                   
  • 如果您有新问题，请单击“ 提问”按钮询问。如果有助于提供上下文，请包含此问题的链接。 -  Taryn East 2014年10月20日23:47                                    
  • 2                                    
    对不起，这应该是一个可以在Firefox（v 33.0）中使用的替代解决方案。目前接受的答案对我不起作用。 -  jroot 2014年 10月21日0:08                                    
  • 很酷，所以这是一个有效的解决方案？如果是这样，太棒了。可能只是你的答案中的语言不会使那个超级显而易见:) -  Taryn East 2014年 10月21日0:18                                    
       

来自   https://stackoverflow.com/questions/24685664/validate-radio-button-angularjs