在包装器中显示角度材料垫错误

Question

如何<mat-error>在不破坏布局的情况下在容器中正确显示？

背景是这样的：我在模板驱动的表单中使用了很多基本的验证器（required, minlength, pattern) and want to display the corresponding error message.mat-form-field only supports the display of onemat-error` 一次，并且对于每条消息，我需要显示一个人类可读的错误消息。所以每个输入看起来像这样：

<mat-form-field>
  <input matInput required minlength="4" pattern="…">
  <mat-error *ngIf="field?.errors?.required">Field is required</mat-error>
  <mat-error *ngIf="field?.errors?.minlength">Must be at least {{ field!.errors!.minlength.requiredLength }} characters</mat-error>
  <mat-error *ngIf="field?.errors?.pattern">Does not match pattern {{ … }}</mat-error>
</mat-form-field>

我必须为每个领域都这样做。看起来很多余！

我尝试了几种从模板中提取这种模式的方法：

• 成分
• *ngFor
• <ng-container>
• <ng-template>

但是，它们都弄乱了布局，然后错误会显示在输入字段中。我认为问题是mat-error需要是 的直接后代，mat-form-field并且我的所有方法都在mat-error和之间添加了一个额外的元素mat-form-field。

那么如何在不必mat-error为每个输入编写所有行的情况下处理错误呢？

Answer 1

我发现您正在使用模板驱动的方法，对于任何不那么简单的表单，我倾向于使用响应式方法。

使用的方法应该是通用的，在字段中传递。为了清楚起见，我使用了一个用例

打字稿类：

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

 getEmailError() {
    return this.email.hasError('required') ? 'You must enter an email address' :
    this.email.hasError('email') ? 'Not a valid email' : '';
}

模板文件：

<mat-form-field>
  <input
    type="email"
    matInput
    placeholder="Your Email"
    autocomplete="false"
    formControlName="email">
  <mat-hint>Please enter an email address</mat-hint>
  <mat-error *ngIf="email.invalid">{{getEmailError()}}</mat-error>
</mat-form-field>