[英]Validate Radio Button AngularJS
这似乎应该相当容易,但我找不到答案。 我有一个表单,我需要验证是否已从广播组中进行选择。 我尝试在单选按钮上使用'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中的提交按钮可显示该行为。
尝试使用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指令的使用。
我认为你需要的是为无线电组添加一个名称,因为无线电输入需要一个名称来确定它属于哪个,下面的链接工作验证没有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/>
使用指令的替代解决方案。 在Firefox(第33.0版)中,接受的答案对我不起作用。
我们的想法是在所有具有特定类名称的无线电上将所需属性设置为false。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.