子组件的表单验证未显示错误 [角度材料]

Question

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

以下是示例https://stackblitz.com/edit/angular-nvcwnh，点击提交按钮，然后你会在第一个输入上显示一个错误

【Angular，Angular material】

Answer 1

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

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

Answer 2

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