Angular - 当无效表单绑定(bind)到也是 Angular 组件的子表单 Controller 时，父表单不更新

Question

我有一个在服务中创建表单对象的用例，现在当页面显示在对话框中时，表单从 ngOnInit 中的服务读取并绑定(bind)到本地模板中使用的变量。该表单稍后用于读取数据。

问题如下，当表单有效并且用户导航到下一页并返回到此页面时一切正常，但是当表单无效并且用户离开然后返回时父表单没有正确更新.

子组件具有正确的有效性，但父表单仍然无效。我注意到这两个用例之间的区别在于表单中的错误对象。

我试图通过在父表单上调用 updateValueAndValidity 来更新有效性。但它没有用。

唯一可行的是在没有任何验证器的情况下对子表单控件调用 setValidators([])。它一开始就没有验证器。

这是该问题的一个 stackblitz 示例。

https://stackblitz.com/edit/angular-8-app-example-ent7s2?embed=1&file=src/app/parent-form-component/parent-form.component.ts&view=preview

Answer 1

我相信我已经修好了。问题是每次调用 ngOnInit 时，原始表单(在应用程序组件中)都会由于子组件内的“new FormGroup()”语句而丢失子 FormGroup 的引用。为避免该问题，您应该尽量不要在表单内重新分配 FormGroups。