使用 patchValue 初始化模板驅動的表單

Question

我使用模板驅動並嘗試使用 patchValue 初始化我的表單，但它不起作用。

如果我使用雙向綁定來設置值 [(fooBar)] 甚至 setTimeout ，我可以讓它工作，但我只是想知道，有沒有辦法讓它只與 patchValue 一起工作？

謝謝你。

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

Answer 2

在模板驅動的表單中，您需要綁定[(ngModel]來設置值。

像這樣嘗試：

.html

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

.ts

formValue:any = {}

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