Угловая проверка формы: $error.required устанавливается, даже если ng-required=false с настраиваемой директивой ввода

У меня есть Пользовательский компонент ввода с проверкой с 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 в код, чтобы обойти его, но я думаю, что где-то делаю ошибку, которую не вижу. Видишь, где я ошибся? Заранее благодарим вас за любую помощь.


person Radek Anuszewski    schedule 07.08.2016    source источник


Ответы (1)


Я нашел решение, я снова забыл включить ngMessages. Без него мой код сошел с ума, прошу прощения за потраченное время :)

person Radek Anuszewski    schedule 07.08.2016