javascript - 使用 patchValue 对模板驱动的表单进行初始化

Question

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

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

https://stackblitz.com/edit/angular-fft2c5

谢谢你。

Answer 1

它不起作用，因为 在调用 时patchValue 方法在您的表单中还没有注册任何控件 .

为什么？

那是因为模板驱动的表单是 异步 .他们将表单控件的创建委托(delegate)给指令。为了避免“检查后更改”错误，这些指令需要一个以上的周期来构建整个控制树。这意味着 在从组件类 中操作任何控件之前，您必须等待一个滴答声。 .

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

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

ERROR Error: There are no form controls registered with this group yet. If you're using ngModel, you may want to check next tick (e.g. use setTimeout).

因此，正如您已经发现的那样，您必须使用 [ngModel]使用例如 setTimeout 绑定(bind)或等待下一个刻度或 requestAnimationFrame
如果你在 ngAfterViewInit 钩子(Hook)中使用它，调度微任务也应该工作:

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