требуемый контроль реактивной формы недействителен, пока нетронутый

У меня угловая реактивная форма с валидаторами (взято со схемы, но обращаться к ней нужно по мере необходимости). Элемент управления недействителен, когда форма инициирована, пока она все еще нетронута, не тронута и не загрязнена. Есть ли предположения, почему это происходит\как этого избежать?


angular angular-validation
person Guy E    schedule 07.02.2019    source источник
comment
пожалуйста, добавьте код, чтобы понять вашу проблему   -  person TheParam    schedule 07.02.2019
comment
Вот код: const ctrl = this.formBuilder.control('', Validators.required); console.log(ctrl.invalid); console.log(ctrl.первозданный); =› правда правда   -  person Hoang Duc Nguyen    schedule 06.12.2019

Ответы (2)


arrow_upward
0
arrow_downward

использовать, напр.

<div *ngIf="name.invalid && (name.dirty || name.touched)"
    class="alert alert-danger">
...
</div>

из официальных документов

Зачем проверять грязный и тронутый? Вы можете не захотеть, чтобы ваше приложение отображало ошибки до того, как пользователь сможет отредактировать форму. Проверки на наличие грязных и прикосновений предотвращают отображение ошибок до тех пор, пока пользователь не сделает одно из двух: изменит значение, превратив элемент управления в грязный; или размывает элемент управления формой, устанавливая элемент управления на касание.

person Eliseo    schedule 07.02.2019

arrow_upward
0
arrow_downward

Все необходимые элементы управления формой, которые отмечены как обязательные, как показано ниже в форме

  createFormGroup() {
  return new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    mobile: new FormControl('', [Validators.required]),
    country: new FormControl('', [Validators.required])
  });
}

поэтому вышеприведенная форма управления электронной почтой, мобильным телефоном и страной будет недействительной, поэтому пользователь отключит кнопку отправки или покажет какое-либо сообщение пользователю

Итак, здесь вы можете отображать, когда пользователь коснулся поля, как показано ниже.

  <input formControlName="mobile">
  <span *ngIf="mobile.invalid && mobile.errors.required">
    Mobile is required.
  </span>
  <span *ngIf="mobile.invalid && mobile.errors.invalidNumber">
    Value has to be a number.
  </span>

Надеюсь, это поможет.

person TheParam    schedule 07.02.2019