У меня есть Пользовательский компонент ввода с проверкой с ngMessages,FormController и ng-required:
<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
, которое не требуется:
<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>
Также для этого поля сообщения проверки видны, хотя поле description
действительно, потому что я добавляю класс has-error
к недопустимым полям:
<div class="form-group"
ng-class="{'has-error': $ctrl.form.$submitted && (!$ctrl.form[$ctrl.fieldName].$valid)}"
>
<!-- rest of code -->
Вы можете легко воспроизвести это неправильное поведение в моем Plunker: Custom input demo приложение с состояниями проверки (я знаю, что в нем есть и другие ошибки). Я думаю, что ng-message="required"
не должно быть видно, потому что поле description
не требуется. Я знаю, что могу добавить несколько ng-if
в код, чтобы обойти его, но я думаю, что где-то делаю ошибку, которую не вижу. Видишь, где я ошибся? Заранее благодарим вас за любую помощь.