验证 AngularJS 单选按钮

Question

验证 AngularJS 单选按钮

78

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

- Spencer

4个回答

98

我认为您需要为无线电组添加名称，因为一个单选按钮需要一个名称来确定它属于哪个组。以下链接可以在没有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

- e-cloud

运行良好，而且组的名称对于正确地使单选按钮工作是必要的，特别是如果表单中有多个组。 - PhiLho

@CilliéMalan，我猜它总是以这种方式运作。至少从1.2版本开始。 - e-cloud

3

需要注意的是，无论是否选择选项，单选按钮组都被认为是有效的，除非组中至少有一个单选按钮具有 ng-model 属性。 - Robert Hickman

1

另一个需要注意的是，这并不能解决一个想要绑定到ng-model的$touched或$dirty属性的问题，但有一种变通方法（至少对于$dirty），即可以嵌套使用ng-form并进行引用。请参见类似的问题 - https://dev59.com/b33aa4cB1Zd3GeqPaDeB - jamiebarrow

0

使用指令的替代方案。接受的答案在Firefox（v 33.0）中对我无效。

想法是在更改时将特定类名的所有单选按钮的required属性设置为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>

- jroot

如果您有新的问题，请通过单击提问按钮来提出。如果它有助于提供上下文，请包含此问题的链接。 - Taryn East

2

抱歉，这应该是一个在Firefox（v 33.0）中可行的替代方案。目前被接受的答案对我没有起作用。 - jroot

很酷，所以这是一个可行的解决方案？如果是的话，太棒了。也许你回答中的语言并不是那么明显 :) - Taryn East

0

在我的情况下，我正在使用AngularJS材料库，并将required属性添加到<md-radio-group>标记中即可解决问题。

- NotABot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dmullings · Accepted Answer

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