라디오 버튼 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에서 실행 버튼을 클릭하면 동작이 표시됩니다.
http://plnkr.co/edit/3qcIbMvJk19OvokcHe2N?p=preview
을 사용합니다 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의 대답 은 간단하며 추가 지침이 필요하지 않습니다. 가능한 한 모든 사람이 그 방법을 사용하는 것이 좋습니다. 이 답변을 여기에 제공두면 작동하는 솔루션을 요구하고 지시문을 보여줍니다.
나는 당신이 필요로하는 것은 라디오 그룹의 이름을 추가하는 것을 생각합니다. 라디오 입력에는 그것이 필요합니다. 아래 링크는 필수없이 유효성 검사를 작동합니다 (허용되는 답변).
<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
지시문을 사용하는 대체 솔루션. 수락 된 답변이 Firefox (v 33.0)에서 작동하지 않습니다.
아이디어는 특정 클래스 이름을 가진 모든 라디오에서 필수 속성을 false로 설정하는 것이 었습니다.
- jqlite 속성 제거 기능에 문제가 있었기 때문에 jQuery가 추가되었습니다.
- 원래 플 런커에서 최대한 많이 복사했습니다.
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>
참고 URL : https://stackoverflow.com/questions/24685664/validate-radio-button-angularjs
'ProgramingTip' 카테고리의 다른 글
| GridView 항목을 정사각형으로 만들기 (0) | 2020.10.13 |
|---|---|
| Java의 createNewFile ()-디렉토리도 생성 또는 생성? (0) | 2020.10.13 |
| 카피 스트라 노를 사용하여 이전에 배포 된 버전으로 어떻게 롤백하고 있습니까? (0) | 2020.10.13 |
| 거기에서 어디로의 빠른 교차 (0) | 2020.10.13 |
| find 및 sed를 사용하여 재귀 적으로 파일 이름 (0) | 2020.10.13 |