子组件的表单验证不会出现错误【Angular 材质】答案

【问题标题】：Form validation of child component doesn't appears errors [Angular material]子组件的表单验证不会出现错误【Angular 材质】
【发布时间】：2019-04-05 21:28:44
【问题描述】：

我有一个带有单个子组件的表单。但是提交表单我看不到子组件的任何错误。错误仅针对直接嵌入在表单中的输入出现

这里是 https://stackblitz.com/edit/angular-nvcwnh 的例子，点击提交按钮然后你会在第一次输入时显示一个错误

[角，角材料]

【问题讨论】：

标签： angular forms validation angular-material2

【解决方案1】：

您可以通过以下几种方式解决它：我能想到的一种方法是当您尝试提交表单时，您可以检查子组件的状态。您可以通过向您的子组件添加一些输入属性并在子组件中分配相同的验证函数来实现。目前，即使您的子组件状态无效，也不会调用验证。

【讨论】：

【解决方案2】：

对于一个非常复杂的表单和多个子组件，我也有同样的问题。我想出的最佳解决方案是在点击提交按钮后立即验证所有表单字段

validateAllFormFields(formGroup: FormGroup | FormArray): boolean {
  const keysArray = formGroup instanceof FormGroup ? Object.values(formGroup.controls) : formGroup.controls;
  keysArray.forEach(control => {
    if (control instanceof FormControl) {
      control.markAsTouched({ onlySelf: false });
      control.updateValueAndValidity();
    } else if (control instanceof FormGroup || control instanceof FormArray) {
      this.validateAllFormFields(control);
    }
  });
  return formGroup.invalid;
}

send() {
  const formIsValid = this.validateAllFormFields(this.testForm);
}

这是你的代码的固定版本（我刚刚将上面的代码添加到app.component.ts） https://stackblitz.com/edit/angular-zbzubh

【讨论】：