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

编程问答 2022-10-31

问题描述

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

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

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

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

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

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

解决方法

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

示例：

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

如果要在异步请求完成后仅更新表单的几个值。 您必须使用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
  })
angularangular-cliasynchronousformsrxjs