如何从异步请求（表单控件）初始化 Angular 表单的默认值

Question

我的网站上有设置，我需要用默认值填充所有字段 - 我的用户的当前设置。

用户输入他的设置后，我发出一个异步 GET 请求，完成后，我需要将他的设置作为默认值传递到我的表单字段。

据我所知，我可以使用以下语法传递默认值：

this.validateForm = this.fb.group({
    language: ['default_value', [Validators.nullValidator]],
    timeZone: ['default_value', [Validators.nullValidator]],
    firstName: ['default_value', [Validators.nullValidator]],
    lastName: ['default_value', [Validators.nullValidator]],
    gender: ['default_value', [Validators.nullValidator]],
    address: ['default_value', [Validators.nullValidator]]
});

但是你看，Angular 需要我在构造函数中立即初始化这个表单组，但我不能，因为异步请求需要一些时间，直到它，字段必须为空。

此外，我认为在 HTML 中执行此操作要容易得多，例如通过使用 ngModel，但它不适用于 formControl 或 [value]，但这也不是解决方案，因为表单控件只是忽略信息，我传递给 [value] 属性并且它无法将 [value] 传递给 select，因为我不仅使用常规 HTML，而且使用 Ng-Zorro而且它没有 [value] 属性。

Answer 1

您可以在使用 setValue 方法从 api 调用中获取值后再次设置表单的值。

样本：

   this.service.functionName().subscribe((res) => {
  this.validateForm.setValue({
    language: res.language,
    firstName: res.firstName
  })
})

Answer 2

如果您只想在异步请求完成后更新表单的几个值。您必须使用 patchValue() 而不是 setValue()。

由于 setValue() 用于设置您的表单获得的所有表单控件，您可以使用 patchValue() 仅更新您想要更新的少数控件。

因此，要更新完整的表单，请使用 setValue()，setValue() 要求所有控件都具有相应的值，否则它会抛出如下错误：-

this.validateForm.setValue({
        language: res.language,
        timeZone: res.timeZone,
        firstName: res.firstName,
        lastName: res.lastName,
        gender: res.gender,
        address: res.address
      })

或者如果只更新少数控件，请像这样选择 patchValue() :-

this.validateForm.patchValue({
    language: res.language,
    firstName: res.firstName
  })

如何从异步请求（表单控件）初始化 Angular 表单的默认值

How to init default values for Angular Form from async request (form control)

forms

asynchronous

rxjs

angular-cli

angular