이것은 꽤 쉬울 것 같지만 답을 찾지 못했습니다. 라디오 그룹에서 선택했는지 확인해야하는 양식이 있습니다. 라디오 버튼에 ‘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/>
다음은 양식이 이제 올바르게 검증되었음을 보여주는 업데이트 된 플 런커입니다.
http://plnkr.co/edit/EdItU2IIkO1KIsC052Xx?p=preview
최신 정보
e-cloud의 대답 은 간단하며 추가 지침이 필요하지 않습니다. 가능한 한 모든 사람이 그 방법을 사용하는 것이 좋습니다. 이 답변은 작동 솔루션을 제공하고 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 (v 33.0)에서 작동하지 않았습니다.
아이디어는 특정 클래스 이름을 가진 모든 라디오에서 필수 속성을 false로 설정하는 것이 었습니다.
- jqlite 속성 제거 기능에 문제가 있었기 때문에 jQuery가 추가되었습니다.
- 나는 원래 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>
답변
제 경우에는 angularJS 재질 라이브러리를 사용 required하고 <md-radio=group>태그에 속성을 추가 하면 트릭이 발생했습니다.
답변
