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>

也许我应该使用if else或其他东西？你觉得怎么样？

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>元素就足够了。

这是stackblitz example。

Answer 2

有同样的问题。 这是我想出的，简洁而优雅。 如果有两个或多个mat-error，则不会同时显示。 但是，整个表格将无效，从而禁用了提交。

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

Answer 3

你快到了。要一次显示一条错误消息，只需检查其他错误（如果存在）。

<mat-error *ngIf="form.controls['username'].errors && form.controls['username'].touched">
  <div *ngIf="form.controls['username'].errors.required &&
    !form.controls['username'].errors.pattern 
    && form.controls['username'].errors.minlength">
    Username is <strong>required</strong> //this is the first message error
  </div>
  <div *ngIf="form.controls['username'].errors.minlength &&
        !form.controls['username'].errors.required &&
        !form.controls['username'].errors.pattern"> // display error if required and pattern errors don't exist Required length: {{form.controls['username'].errors.minlength['requiredLength']}}
    Actual length:{{form.controls['username'].errors.minlength['actualLength']}}
  </div>
  <div *ngIf="form.controls['username'].errors.pattern &&
                     !form.controls['username'].errors.required &&
                     !form.controls['username'].errors.minlength
                 ">
    Only a-zA-Z0-9
  </div>
</mat-error>

基本上只是否定!所有其他错误消息。这适合我。

希望这有帮助。