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检测到某些更改，但是submitted的{{1}}属性始终为form。我在做什么错了？

See this Stackblitz

Answer 1

您无需实现ErrorStateMatcher即可实现这种行为。并且在formGroup

上使用mat-form-field毫无意义

只需更改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

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

1 个答案: