Required/ngRequired에 대한 사용자 지정 지침

Question

필요에 따라 드롭 다운의 유효성을 검사하고 싶습니다. 기본값은 값이 null이거나 공백 인 경우에만 작동합니다 (내가 틀렸다면 나를 수정하십시오). 값이 '이 지정되지 않으면'이면 오류가 발생하고 양식이 유효하지 않게해야합니다.

<select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required></select> 

나는 오류 메시지를 표시 할 수 있습니다이 사용하지만이

<span class="error" ng-show="applications.first == 'not assigned'?true:false">Select Approver</span> 

해결 잘못된 형식을 수행합니다 - 당신이 다음 섀넌 을 확인 필요 사용하려는 경우)

1 Hochkins 솔루션입니다.

<form name="formName"> 
     <select name="first" class="select" title="Select Approver" ng-model="applications.first" ng-options="x.id as x.value for x in list1" ng-change="SetToAll(applications.first,'1')" required="true"> 
     <option value="">Not Assigned</option> 
     </select> 
     <span class="error" ng-show="formName.first.$invalid ?true:false">Select Approver</span> 
     <pre>{{formName | json}}</pre> 
</form> 

He 빈 값 <option value="">Not Assigned</option>의 옵션이 추가되었습니다. 선택에서 required="true"을 설정하십시오. 이것은 완벽하게 작동합니다.

2) 사용자 지정 지시문 사용.

app.directive('req', [ 
     function() { 
      var link = function($scope, $element, $attrs, ctrl) { 
       var validate = function(viewValue) { 
        var comparisonModel = $attrs.req; 
        var invalid = $attrs.invalid; 
        if (viewValue == invalid) { 
         // It's valid because we have nothing to compare against 
         ctrl.$setValidity('req', false); 
        } else { 
         ctrl.$setValidity('req', true); 
        } 
       }; 
       $attrs.$observe('req', function(comparisonModel) { 
        // Whenever the comparison model changes we'll re-validate 
        return validate(ctrl.$viewValue); 
       }); 
      }; 
      return { 
       require: 'ngModel', 
       link: link 
      }; 

     } 
    ]); 

그리고 HTML 코드는 :

여기

<select invalid="not assigned" req={{applications.first}} name="first" class="select" ng-model="applications.first" ng-options="x.id as x.value for x in list1" title="Select Approver" ></select> 
<span class="error" ng-show="Step5.first.$error.req">Select Approver</span> 

당신은 invalid="not assigned" 또는 invalid='0' 또는 invalid=' ' 같은 값을 설정해야합니다. 지시문에서 값이 일치하면 잘못된 속성과 비교하여 오류를 표시합니다.

Answer 1

select 요소에 필요한 값을 추가 한 다음 FORM 개체를 사용하여 필드가 유효한지 여부를 확인할 수 있습니다.

양식 이름을 사용하여 양식의 필드에 액세스하여 유효성을 확인할 수도 있습니다. '기본'옵션을 추가하려면 드롭 다운에 필요한 드롭 다운 메뉴에서 기술적으로 유효하지 않은 값이 빈 옵션을 추가 할 수 있습니다. 올바른 옵션이 선택되면 사용자가 다시 선택할 수 없도록 옵션을 숨기도록 선택할 수 있습니다. 컨트롤러, 설치 내부

<form name="formName" ng-controller="testCtrl"> 
    <select name="first" ng-options="x.id as x.value for x in list1" ng-model="applications.first" required> 
     <option value="" ng-hide="formName.first.$valid">Not Assigned</option> 
    </select> 
    <pre>{{formName.first.$invalid | json}}</pre> 
</form> 

몇 가지 옵션 :

angular.module('sandbox', []).controller('testCtrl', function($scope) { 

    $scope.list1 = [{ 
    id: 1, 
    value: 'apples' 
    }, { 
    id: 2, 
    value: 'oranges' 
    }]; 
}); 

데모 : https://jsfiddle.net/suunyz3e/304/