Angular Material:提交父表单时，必填的mat-input字段不显示错误

Question

为了代码重用和在我的web应用程序中保持一致的功能，我在我的应用程序中创建了一个输入组件，它的作用是在父窗体中嵌入一个mat-input。

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

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

我已经在Angular Material (参见：https://github.com/angular/material2/issues/9788)上发布了上面的问题，但可能我遗漏了一些东西。

我是不是遗漏了什么？有解决办法吗？

Answer 1

以下解决方法由Jefiozie在GitHub上发布。代码遍历窗体的所有控件，并将它们标记为已触摸。

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

Answer 2

在窗体上使用markAllAsTouched()方法可将控件及其所有子控件标记为已触摸。

Official Angular API reference