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

Question

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

所以我实现了 Angular Responsive Forms

  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">

Answer 1

在 Ionic 6 中，通过使用error在 Ionic 6 中，通过使用ion-item 上的插槽，

请参阅此处的文档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>