3

나는이 Custom input component with validationngMessages, FormController 및 NG-필요로 :이 방법에 사용되는

<div class="col-sm-9 col-xs-12"> 
    <input 
     id="{{$ctrl.fieldName}}" 
     name="{{$ctrl.fieldName}}" 
     class="form-control" 
     type="text" 
     minlength="{{$ctrl.minLength}}" 
     maxlength="{{$ctrl.maxLength}}" 
     ng-required="{{$ctrl.isRequired === 'true'}}" 
     ng-model="$ctrl.value" 
     ng-change="$ctrl.form.$submitted = false;" 
    > 
    <div 
     ng-messages="$ctrl.form[$ctrl.fieldName].$error" 
     ng-if="$ctrl.form.$submitted" 
    > 
     <span class="help-block" ng-message="required"> 
     Field is required 
     </span> 
     <span class="help-block" ng-message="minlength"> 
     Minimum length of field: {{$ctrl.minLength}} 
     </span> 
     <span class="help-block" ng-message="maxlength"> 
     Maximum length of field: {{$ctrl.maxLength}} 
     </span> 
    </div> 
    </div> 

:

<act-text-field 
    form="heroAddForm" 
    field-name="name" 
    min-length="3" 
    max-length="15" 
    is-required="true" 
    errors="$ctrl.errors.name" 
    ng-model="$ctrl.hero.name"> 
</act-text-field> 

사용자가 submit 버튼을 클릭하면 유효성을 검사합니다. 그리고 검증 필수 항목 name에도 화재,하지만, 작동도 필요하지 않습니다 필드 description에 대한 : I가 클래스 has-error를 추가 원인 description이 유효 필드 있지만 검증 메시지를 볼 수 있습니다이 필드 또한

<act-text-field 
    form="heroAddForm" 
    field-name="description" 
    max-length="50" 
    is-required="false" 
    errors="$ctrl.errors.description" 
    ng-model="$ctrl.hero.description" 
></act-text-field> 

, 잘못된 필드 :

<div class="form-group" 
    ng-class="{'has-error': $ctrl.form.$submitted && (!$ctrl.form[$ctrl.fieldName].$valid)}" 
> 
<!-- rest of code --> 

당신은 쉽게이 잘못된 동작을 재현 할 수 있습니다 내 Plunker: Custom input demo app with validation states (나는 그것이 다른 실수가 알고있다). 필드 description이 필요하지 않기 때문에 ng-message="required"이 보이지 않아야한다고 생각합니다. 내가 코드를 ng-if에 추가 할 수 있다는 것을 알고있다.하지만 나는 그것을 볼 수없는 어딘가에서 실수를 저지른다고 생각한다. 내가 실수 한 곳을 보니? 모든 도움을 위해 미리 감사드립니다.

답변