나는이 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
에 추가 할 수 있다는 것을 알고있다.하지만 나는 그것을 볼 수없는 어딘가에서 실수를 저지른다고 생각한다. 내가 실수 한 곳을 보니? 모든 도움을 위해 미리 감사드립니다.