离子输入验证（ng无效）/控件保持ng不变-必须取消两次选择

Question

我正在将Angular反应形式应用于空白的Ionic项目。我的模板使用了文档中所述的OOTB ion-input组件。默认情况下，无效用户输入的视觉指示符是此元素底部的红色边框-通过CSS类的ng-invalid规则进行设置：

出于我未知的原因，我必须选择并取消选择控件两次以触发所需的行为。为什么？

另一方面，验证器似乎立即识别出输入值无效。为什么ion-input不会出现这种情况，如何以不太笨拙的方式在第一个 deselect 上显示红色边框？

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 Example Project

Answer 1

检查了输入并发现了问题。

这是页面的结构，并且是离子项目：

边界来自.item-inner格。选择器是

.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

第二次是

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

如您所见，在第一次单击时，该项目仍为untouched。选择器要求使用touched控件。

尽管我不知道为什么会这样，但我绝对可以告诉你这是一个离子错误。我不知道如何解决它，除非通过

明确标记为已触摸

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

Here is the working demo