angular - Angular Material ErrorStateMatcher 可以检测父表单何时提交吗？

Question

我有一个父组件，它设置一个表单并将其传递给子组件。

<form [formGroup]="form" (submit)="submit()">
  <app-child [form]="form"></app-child>
  <button mat-button type="submit">Submit</button>
</form>

子组件显示如下输入字段:

<mat-form-field *ngIf="form" [formGroup]="form">
  <input matInput
         placeholder="Email"
         formControlName="email"
         [errorStateMatcher]="matcher"
         required>
</mat-form-field>

输入字段是必需的，如果在未填写的情况下提交表单，即使用户从未接触过它，也应该显示错误。这是简单表单中的自动行为，但是(我认为)由于我使用的是子表单，我必须使用 ErrorStateMatcher 实现自定义错误逻辑。

export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control, form) {
    return control && control.invalid && form && form.submitted;
  }
}

但是，这不起作用。我不知道如何让子输入来检测父表单何时提交。 ErrorStateMatcher 检测到某些内容已发生更改，但 form 的 subscribed 属性始终为 false。我做错了什么？

See this Stackblitz

Answer 1

您不需要实现 ErrorStateMatcher 来实现此类行为。在 mat-form-field

上使用 formGroup 是没有意义的

只需更改 child.component.html 如下

<mat-form-field *ngIf="form">
  <input matInput placeholder="Email" [formControl]="form.get('email')">
</mat-form-field>

这是一个工作示例 https://stackblitz.com/edit/angular-material-error-matcher-child-component-6nwmwe