Требуется контроль формы реагирования является недействительным в то время как нетронутый

Question

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

Answer 1

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

  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>

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

Answer 2

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

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

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

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