离子输入验证（ng-无效）/控制保持 ng-未触及 - 必须取消选择两次

Question

我正在将 Angular 响应式表单应用于空白 Ionic 项目。我的模板使用 OOTB ion-input 组件，如文档中所述。默认情况下，无效用户输入的视觉指示器是此元素底部的红色边框 - 通过 ng-invalid class:

的 CSS 规则设置

出于我不知道的原因，我必须 select 和 deselect 控制两次触发所需的行为。为什么？

另一方面，验证器似乎立即意识到输入的值无效。为什么 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，不需要的行为：

Link: Stackblitz Example Project

Answer 1

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

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

边框来自.item-innerdiv。选择器是

.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 控件。

虽然我不知道为什么会这样，但我可以肯定的告诉你，这是一个Ionic错误。我不知道如何解决它，除非通过

明确地将其标记为已触及

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

Here is the working demo

离子输入验证（ng-无效）/控制保持 ng-未触及 - 必须取消选择两次

ion-input Validation (ng-invalid) / Control Remains ng-untouched - Have to Deselect Twice

typescript

ionic-framework

ionic3

angular