离子验证 - 显示错误信息，如材料答案

【问题标题】：Ionic Validation - show error message like material离子验证 - 显示错误信息，如材料
【发布时间】：2020-07-14 07:19:24
【问题描述】：

我一直在 Ionic 5 中处理登录和注册页面。我想在输入文本字段下方显示错误消息，如下所示

所以我实现了 Angular 响应式表单

  ngOnInit() {
    this.afAuth.authState.subscribe(data => console.log(data));

    this.myForm = this.fb.group({
      email: ['', [
        Validators.required,
        Validators.email
      ]],
      password: ['', [
        Validators.required,
        Validators.pattern('^(([a-zA-Z][^:.*/}{;])*\d*)$')
      ]]
    });
  }

  get email(){
    return this.myForm.get('email');
  }

  get password(){
    return this.myForm.get('password');
  }

之后，我创建了一个包含两个离子输入字段的表单。

<ion-item class="input_item">
  <ion-label position="floating">E-Mail</ion-label>
  <ion-input formControlName="email" position="floating"></ion-input>
</ion-item>

<div class="validation-errors">
    <div class="error-message" *ngIf="email.errors && email.dirty || email.touched">
      Your E-Mail is invalid!
    </div>
</div>

我尝试使用此类“验证错误”，但它没有按我想要的方式显示消息。我设法让它看起来像这样

但是有没有一些更简单的方法可以像 Angular Material 那样显示错误消息？我可以使用 Ionic 的某些东西，还是我必须实现 Angular Material UI 组件？

感谢您的回答。

更新：由于这个问题自我的原始帖子以来已经获得了一些关注，并且似乎没有更简单的解决方案，我想为路过的任何人发布使用过的样式：

.validation-errors {
    font-size: small;
    color: var(--ion-color-danger, #f1453d);
}

/* These are necessary to make the underline red */
ion-item.invalid {
    --highlight-background: var(--ion-color-danger, #f1453d);
}

ion-item {
    --highlight-color-invalid: var(--ion-color-primary);
}

在模板中包含这个

<ion-item [class.invalid]="email.errors && email.touched">

【问题讨论】：

标签： angular validation user-interface ionic-framework angular-material

【解决方案1】：

在 Ionic 6 中，通过在 ion-item 上使用 error 插槽，这变得非常简单。

在此处查看文档https://ionicframework.com/docs/api/item#slots

例子：

<ion-item>
  <ion-label>Name</ion-label>
  <ion-input formControlName="firstName"></ion-input>
  <span slot="error">Name is required</span>
</ion-item>

【讨论】：