Question

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

背景是这样的：我在模板驱动的表单（required，minlength，pattern) and want to display the corresponding error message. mat-form-field only supports the display of one mat-一次出现错误，对于每条消息，我都需要显示一条人类可读的错误消息。因此，每次输入都将如下所示：

<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

我看到您使用的是模板驱动的方法，对于那些不是真正简单分类的表单，我倾向于使用Reactive。

使用的方法应该通用，并在现场传递。为了清楚起见，我只用了一个用例

Typescript类：

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>

Answer 2

<mat-form-field>
  <input matInput required minlength="4" pattern="…">

<mat-error *ngfor="let type of (validationTypes$ | async)">
  <mat-error *ngIf="field?.errors[type]">{{validationMessagesService.getValidatorErrorMessage(type, maxLength, 'fieldName')}}</mat-error>
</mat-error>
</mat-form-field>

在包装中显示Angular Material垫错误

2 个答案: