角度材质：提交父窗体时，必需的mat-input字段不显示错误

Question

为了重复使用代码并在我的网络应用程序中维护一致的功能，我在我的应用程序中创建了一个输入组件，其作用是在父表单中嵌入mat输入。

当mat-input是必填字段时，组件在父表单中正确显示它，并且当用户与字段交互但未输入任何内容时会显示错误。但是，在提交父表单时，如果没有任何用户与嵌入字段的交互，则不会显示错误。请参阅下面的StackBlitz网址：

https://stackblitz.com/edit/angular-material2-issue-jph57r

我在Angular Material上发布了上述问题（参见：https://github.com/angular/material2/issues/9788），但也许我遗漏了一些东西。

我错过了什么吗？有解决方法吗？

Answer 1

在表单上使用markAllAsTouched()方法将控件及其所有后代控件标记为已触摸。

Official Angular API reference

Answer 2

Jefiozie在GitHub发布了以下解决方法。代码循环遍历表单的所有控件，并将其标记为触摸。

private setFormGroupTouched(formGroup: FormGroup) {
    Object.keys(this.formGroup.controls).forEach(field => {
      const control = this.formGroup.get(field);
      control.markAsTouched({ onlySelf: true });
    });
  }