如何检查 matInput 是否显示错误

Question

我尝试显示错误消息和错误图标当matinput具有错误时（由form> form concontrol控制）。 但是，如果表单是在没有触摸字段的情况下提交的，则不会显示错误。

或这是我的代码：

app.component.ts

ngOnInit() {
    this.formGroup = new FormGroup({
      email: new FormControl(null, [Validators.required, Validators.email]),
    });
}
get emailHasError() {
    return (
      !this.formGroup.get('email').valid && this.formGroup.get('email').touched
    );
}

app.component.html，

<form [formGroup]="formGroup" class="form">
  <mat-form-field class="form-element">
    <input matInput placeholder="Email address" formControlName="email" />
    <mat-error *ngIf="emailHasError">
      {{ errorEmail }}
    </mat-error>
  </mat-form-field>
  <div class="form-element">
    <button mat-raised-button color="primary" type="submit" class="button">
      Submit Form
    </button>
  </div>
</form>

但是，matinput字段变成红色，似乎会收到错误。

我阅读了一些建议，建议在表单提交上切换属性issubmit。但是似乎很丑陋，如果将表格分为几个组成部分，则需要将此属性传递给儿童组件。

Angular材料如何检测是否提交表单以显示错误？

编辑：

我目前发现的唯一解决方案是使用classList使用@viewchild如下。但这似乎仍然是一种骇人听闻的方法... 在Stackblitz上 我的处理如下：

@ViewChild('matInput') matInput: ElementRef;
get hasError() {
    return this.matInput?.nativeElement?.classList?.contains('ng-invalid');
}

<input
  matInput
  #matInput
  placeholder="Email address"
  formControlName="email"
/>

Answer 1

无需返回 emailHasError() 和 errorEmail()，并检查触摸内部组件，角度材料输入字段会自动检查并显示 mat-error 仅当某个字段被触摸时。

相反，直接检查 html 中的错误并相应地显示消息。

请参阅此处

在 styles.css 中添加此 css，以便在有多个错误时仅显示第一个错误 -

/* shows only first error */
.mat-error:not(:first-of-type) {
  display: none !important;
}

Answer 2

自定义 error statateMatcher 解决这个问题的整洁解决方案。

1. 创建一个自定义错误StateMatcher类似：

class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(
    control: FormControl | null,
    form: FormGroupDirective | NgForm | null
  ): boolean {
    const isSubmitted = form && form.submitted;
    return !!(
      control &&
      control.invalid &&
      (control.dirty || control.touched || isSubmitted)
    );
  }
}

2. 将其添加到组件类中

  matcher = new MyErrorStateMatcher();

3. ，将其添加到模板中。

  <mat-form-field class="form-element">
    <input
      matInput
      placeholder="Email address"
      formControlName="email"
      [errorStateMatcher]="matcher"
    />
    <mat-error *ngIf="formGroup.invalid">
      <mat-icon mat-suffix color="warn">error</mat-icon>
      {{ errorEmail }}
    </mat-error>
  </mat-form-field>

错误StateMatcher控制哪种条件应在UI中显示错误响应。在当前示例中，即使表单控件不是“肮脏”或“触摸”的，它也会在iSSUBITINES为TRUE时显示。

这是 stackblitz demo 。