Angular Material显示两个错误消息

Question

我正在使用角形材料和反应形式。我想要显示错误消息时，仅显示一条消息，如果解决一个错误，则显示另一条消息。

现在如何：

HTML：

<mat-form-field class="example-full-width">
  <input matInput
         placeholder="Username"
         name="username"
         [formControlName]="'username'">
  <mat-error *ngIf="form.controls['username'].errors && form.controls['username'].touched">
    <div *ngIf="form.controls['username'].errors.required">
      Username is <strong>required</strong>
    </div>
    <div *ngIf="form.controls['username'].errors.minlength">
      Required length: {{form.controls['username'].errors.minlength['requiredLength']}}
      Actual length:{{form.controls['username'].errors.minlength['actualLength']}}
    </div>
    <div *ngIf="form.controls['username'].errors.pattern">
      Only a-zA-Z0-9
    </div>

  </mat-error>

</mat-form-field>

也许我应该使用其他的东西？你怎么看？

Answer 1

您可以<mat-error>检查控件是否为控件invalid，然后获取相应的错误消息，即：

<mat-error *ngIf="form.controls['username'].invalid">{{ getErrorMessage() }}</mat-error>

然后，您.ts将拥有一个函数来检索相应的错误消息：

getErrorMessage() {
    return this.form.controls['username'].hasError('required') ? 'You must enter a value' :
        this.form.controls['username'].hasError('pattern') ? 'Not a valid username' :
        this.form.controls['username'].hasError('minlength') ? 'Required length is at least 3 characters' :
           '';
  }

您不需要那些divs，<mat-error>如果您应用了适当的样式，则该元素就足够了。

这是一个堆叠闪电的例子。

Answer 2

遇到了同样的问题。这就是我想出的，简单而优雅。mat-error当有两个或更多时，不会同时显示 。然而，整个表单将无效，无法提交。

mat-error + mat-error {
  display: none;
}