[ Validate ]옵션 버튼의 각도 확인JS
이건 꽤 쉬워야 할 것 같은데, 답을 못 찾겠어.라디오 그룹에서 선택되었음을 확인할 수 있는 양식을 가지고 있습니다.라디오 버튼의 '필수' 속성을 사용해 보았지만, 폼이 확인되면 모든 라디오 버튼을 선택하지 않으면 불평이 발생합니다(설계상 불가능).
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에서 [Submit]버튼을 클릭하면 동작이 표시됩니다.
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의 답변은 간단하며 추가 지침이 필요하지 않습니다.가능하다면 모두에게 그 방법을 사용하라고 권합니다.이 답변은 유효한 솔루션을 제공하고 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/>
http://plnkr.co/edit/LdgAywfC6mu7gL9SxPpC?p=preview
지시를 사용한 대체 솔루션.Firefox(v 33.0)에서는 받아들여진 답변이 작동하지 않았습니다.
변경 시 특정 클래스 이름을 가진 모든 무선에서 필요한 Atribute를 false로 설정하는 것이 목적이었습니다.
- jqlite remove attribute 함수에 문제가 있어 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>
저 같은 경우에는 앵귤러를 사용해서JS 재료 라이브러리 및 추가required의 탓으로 돌리다<md-radio=group>태그가 성공했어
언급URL : https://stackoverflow.com/questions/24685664/validate-radio-button-angularjs
'programing' 카테고리의 다른 글
| use Callback, use Memo 및 use Effect를 사용하는 경우 (0) | 2023.03.21 |
|---|---|
| 일치하는 항목이 없을 때 JPA 쿼리 값 반환 (0) | 2023.03.21 |
| JSX는 무엇의 약자입니까? (0) | 2023.03.21 |
| AngularJS UI 라우터 $state reload child 상태만 (0) | 2023.03.21 |
| angularjs 지시문에 대해 트랜슬루드 콘텐츠가 제공되었는지 감지합니다. (0) | 2023.03.16 |