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

我正在对一个空白的

Ionic

项目应用

Angular

反应形式。我的模板使用文档中描述的OOTB

ion输入组件。默认情况下，无效用户输入的可视指示器是此元素底部的红色边框-通过
ng invalid
类的
CSS
规则设置：


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

另一方面，验证器似乎立即识别出输入的值无效。为什么离子输入没有出现这种情况？如何以一种不太老套的方式在第一次取消选择时获得红色边框

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>


名称
名称字段是必需的

名称必须至少包含2个字符

名称必须少于30个字符


我的ionic版本是：
ionic angular 3.9.5
，不需要的行为：


链接：
检查输入并发现问题

这是您的页面结构和爱奥尼亚项目：

边框来自
.item internal
div。选择器为

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

当您第一次单击时，
的类是

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

如您所见，在第一次单击时，该项目保持未触及。选择器要求触摸
控件

虽然我不知道为什么会这样，但我可以肯定地告诉你，这是一个离子错误。我不知道如何解决它，除非明确地将其标记为已触穿

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

未触及的控件将被验证，但不会显示错误。这意味着您可以使用逻辑来控制表单，但是如果用户至少不触摸表单，那么他就看不到错误。我还没有理解你的问题：你想在创建表单组时看到错误吗？我的问题很简单，为什么我必须点击控件两次才能看到红色边框？正如我在前面的评论中所解释的，你必须进入并离开。如果不是这样，那么请提供一个复制这个问题的例子。最小可复制的例子已经在我的帖子中了。我使用的是ionic 3.9.5.a，它是沙箱（如stackblitz）上问题的复制品。如果您不想提供它，那么很好，我将根据您提供的代码回答：它没有问题。很有帮助，不是吗：）您可能可以制定一个指令来管理这个涉及到的问题，但我认为最有效的解决方法是在Ionic存储库上打开一个问题。很有趣，感谢您的帮助和建议。现在还没有答案。也许其他人有其他的想法或建议。没问题，但是，在他们的回购协议上发布一个问题，你甚至可能得到答案！