使用 patchValue 为模板驱动表单进行初始化

Question

我使用模板驱动，并尝试使用 patchValue 初始化我的表单，但它不起作用。

如果我使用双向绑定来设置值 [(fooBar)] 甚至 setTimeout，我可以让它工作，但我只是想知道，有没有办法让它只与 patchValue 一起工作？

谢谢。

Answer 1

它不起作用，因为在调用方法时， patchValue 您的表单中尚未注册任何控件。

为什么？

这是因为模板驱动的表单是 异步的。他们将表单控件的创建委托给指令。为了避免“检查后更改”错误，这些指令需要多个周期来构建整个控制树。这意味着您必须等待一段时间才能从组件类中操作任何控件。

此外，如果你尝试使用setValue方法而不是patchValueAngular，它甚至会警告你如何处理它。

this.myForm.control.setValue({name: this.name});

ERROR 错误：尚未向该组注册任何表单控件。如果您使用 ngModel，您可能需要检查下一个刻度（例如使用 setTimeout）。

因此，正如您已经发现的那样，您必须使用[ngModel]绑定或使用例如setTimeout或等待下一个刻度requestAnimationFrame

如果你想在 ngAfterViewInit 钩子中使用它，调度微任务也应该可以工作：

ngAfterViewInit() {
  Promise.resolve().then(() => {
    this.myForm.control.patchValue({ name: this.name });
  });
}