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

【问题标题】：Initialize using patchValue for template driven forms使用 patchValue 对模板驱动的表单进行初始化
【发布时间】：2020-04-27 16:42:40
【问题描述】：

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

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

谢谢。

【问题讨论】：

【解决方案1】：

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

为什么？

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

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

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 });
  });
}

【讨论】：

【解决方案2】：

在模板驱动的表单中，需要绑定[(ngModel]来设置值。

试试这样：

.html

<input name="name" [(ngModel)]="formValue.name"/>

.ts

formValue:any = {}

ngOnInit() {
  this.formValue = {name: this.name}
}

【讨论】：