验证单选按钮AngularJS

Question

This seems like it should be fairly easy, but I'm not finding the answer. 这似乎应该相当容易，但我找不到答案。 I have a form where I need to validate that a selection has been made from a radio group. 我有一个表单，我需要验证是否已从广播组中进行选择。 I tried using the 'required' attribute on the radio buttons, but when the form is validated it complains unless all the radio buttons are selected (which is impossible by design). 我尝试在单选按钮上使用'required'属性，但是当表单被验证时，它会抱怨，除非选择了所有的单选按钮（这在设计上是不可能的）。

What is the proper way to validate a radio group selection in AngularJS? 在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>

Clicking the submit button in the Plnkr shows the behavior. 单击Plnkr中的提交按钮可显示该行为。

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

Answer 1

Try using ng-required="!color" . 尝试使用ng-required="!color" 。 This makes it so that the field is only required when the value is not set. 这使得只有在未设置值时才需要该字段。 If a value is set, then required is removed and it will pass validation. 如果设置了值，则删除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/>

Here is an updated plunker that demonstrates that the form now validates correctly: http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview 这是一个更新的plunker，它表明表单现在可以正确验证： http ：//plnkr.co/edit/EdItU2IIkO1KIsC052Xx？p = preview

Update 更新

e-cloud's answer is simple and doesn't require an additional directive. e-cloud的答案很简单，不需要额外的指令。 I suggest everyone use that method if possible. 我建议大家尽可能使用这种方法。 Leaving this answer here as it does provide a working solution and demonstrates the use of the ng-required directive. 在这里留下这个答案，因为它提供了一个可行的解决方案并演示了ng-required指令的使用。

Answer 2

I think what you need is to add a name for the radio group, for a radio input need a name to determine which it belongs to, the link below works validation without ng-required(the accepted answer) 我认为你需要的是为无线电组添加一个名称，因为无线电输入需要一个名称来确定它属于哪个，下面的链接工作验证没有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 http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview

Answer 3

Alternative solution using a directive. 使用指令的替代解决方案。 Accepted answer didn't work for me in Firefox (v 33.0). 在Firefox（第33.0版）中，接受的答案对我不起作用。

The idea was to set the required attribute to false on all radios with a specific class name, on change. 我们的想法是在所有具有特定类名称的无线电上将所需属性设置为false。

jQuery was added because I was having trouble with the jqlite remove attribute function. jQuery被添加，因为我遇到了jqlite删除属性函数的问题。
I copied as much as possible from the original plunker. 我从原始的plunker中尽可能地复制了。

http://plnkr.co/edit/nbzjQqCAvwNmkbLW5bxN?p=preview 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>

验证单选按钮AngularJS

问题描述

3 个解决方案

解决方案1
122 已采纳 2014-07-10 20:30:29

Update 更新

解决方案2
93 2014-12-23 15:51:20

解决方案3
0 2014-10-20 23:16:33

验证单选按钮AngularJS

问题描述

3 个解决方案

解决方案1 122 已采纳 2014-07-10 20:30:29

Update 更新

解决方案2 93 2014-12-23 15:51:20

解决方案3 0 2014-10-20 23:16:33

解决方案1
122 已采纳 2014-07-10 20:30:29

解决方案2
93 2014-12-23 15:51:20

解决方案3
0 2014-10-20 23:16:33