Проверка ионного входа (ng-invalid) / Контроль остается ng-нетронутым - необходимо отменить выбор дважды

Question

Я применяю Angular реактивную форму к пустому Ionic проекту.Мой шаблон использует компонент OOTB ion-input, как описано в документации.По умолчанию визуальным индикатором для недопустимого пользовательского ввода является красная граница в нижней части этого элемента - устанавливается с помощью правил CSS класса ng-invalid:

По неизвестной мне причине я должен выбрать и отменить выбор элемент управления дважды , чтобы вызвать желаемое поведение.Почему?

С другой стороны, кажется, что валидаторы сразу распознали, что значение ввода недопустимо.Почему это не происходит для ion-input и как я могу получить красную рамку на первом отмене выбора не слишком хакерским способом?

export class HomePage {
  formGroup : FormGroup;
  get name() { return this.formGroup.get('name'); }

  constructor(public formBuilder: FormBuilder) {
    this.formGroup = this.formBuilder.group({
      name: ['', [Validators.required, Validators.minLength(2), Validators.maxLength(30)]]
    });
  }
}

Шаблон:

<form [formGroup]="formGroup">
    <ion-item>
      <ion-label floating>Name</ion-label>
      <ion-input type="text" formControlName="name"></ion-input>
    </ion-item>
    <p *ngIf="name.errors?.required && name.touched" class='text-danger'>Name field is required</p>
    <p *ngIf="name.errors?.minlength" class='text-danger'>Name must be at least 2 characters</p>
    <p *ngIf="name.errors?.maxlength" class='text-danger'>Name must be less than 30 characters</p>
</form>

Моя ионная версия: ionic-angular 3.9.5, нежелательное поведение:

Ссылка: Пример проекта Stackblitz

Answer 1

Проверил ввод и обнаружил проблему.

Это структура вашей страницы и ионный элемент:

Граница происходит от .item-inner div.Селектор:

.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus):not(.item-input-has-focus) .item-inner

При первом щелчке классы <ion-item> равны

item item-block item-md item-input item-label-floating ng-untouched ng-pristine ng-invalid

И во второй раз они равны

* 1017.*

Как видите, при первом щелчке элемент остается untouched.Селектор запрашивает элемент управления touched.

Хотя я не знаю, почему это происходит, я определенно могу сказать вам, что это ионная ошибка.Я не знаю, как решить, кроме как явно пометить его как прикосновенный через

 (focus)="formGroup.get('name').markAsTouched()"

Вот рабочая демоверсия