验证单选按钮AngularJS
Posted
技术标签:
【中文标题】验证单选按钮AngularJS【英文标题】：Validate Radio Button AngularJS 【发布时间】：2014-09-01 08:48:14 【问题描述】：这似乎应该很容易，但我没有找到答案。我有一个表格，我需要在其中验证是否已从广播组中进行了选择。我尝试在单选按钮上使用“必需”属性，但是当表单被验证时它会抱怨，除非所有单选按钮都被选中（这在设计上是不可能的）。
在 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
【问题讨论】：
【参考方案1】：尝试使用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 的answer 很简单，不需要额外的指令。如果可能的话，我建议每个人都使用这种方法。在这里留下这个答案，因为它确实提供了一个可行的解决方案并演示了 ng-required 指令的使用。
【讨论】：
ng-required 而不是 required 这样做。谢谢。
太棒了！谢谢。
这个解决方案不起作用，即使在提供的 plnkr 演示中也不行。
@ConquerorsHaki 它似乎仍在为我工作。选择值后，您可以提交表单。你在看什么？
对不起@dmullings 我一定把plnkrs弄糊涂了。它确实像一个魅力！【参考方案2】：
我认为您需要为无线电组添加一个名称，对于无线电输入需要一个名称来确定它属于哪个，下面的链接可以在没有 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
【讨论】：
工作正常，组的名称对于正确的单选按钮工作是必要的，特别是如果您在一个表单中有多个组... @CilliéMalan，我想它总是这样工作。至少从 1.2 开始。 需要注意的重要一点是，无论选择哪个选项，单选按钮组都被认为是有效的，除非组中至少有一个单选按钮具有ng-model 属性。
要注意的另一件事是，这并不能解决想要绑定ng-model 的$touched 或$dirty 属性的问题，但有一种解决方法（至少对于$dirty) 其中ng-form 可以嵌套和引用。在此处查看类似问题 - ***.com/questions/22181462/…【参考方案3】：
使用指令的替代解决方案。接受的答案在 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>
【讨论】：
如果您有新问题，请点击 按钮提出问题。如果有助于提供上下文，请包含指向此问题的链接。 对不起，这应该是在 Firefox (v 33.0) 中工作的替代解决方案。当前接受的答案对我不起作用。 酷，所以这是一个可行的解决方案？如果是这样，太棒了。可能只是您的答案中的语言并没有使这一点变得非常明显:)【参考方案4】：在我的例子中，我使用了 angularJS 材质库并将required 属性添加到<md-radio=group> 标签就可以了。
【讨论】：
以上是关于验证单选按钮AngularJS的主要内容，如果未能解决你的问题，请参考以下文章