라디오 버튼 AngularJS 유효성 검사

Question 1

이것은 꽤 쉬울 것 같지만 답을 찾지 못했습니다. 라디오 그룹에서 선택했는지 확인해야하는 양식이 있습니다. 라디오 버튼에 '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

Question 2

을 사용해보십시오 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 지시문의 사용을 보여주기 때문에 여기에 남겨 둡니다.

Question 3

나는 당신이 필요로하는 것은 라디오 그룹의 이름을 추가하는 것이라고 생각합니다.

<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

Question 4

지시문을 사용하는 대체 솔루션. 수락 된 답변이 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>

Question 5

제 경우에는 angularJS 재질 라이브러리를 사용 required하고 <md-radio=group>태그에 속성을 추가 하면 트릭이 발생했습니다.