如何解决如何从异步请求表单控件初始化Angular Form的默认值
我在网站上有设置,我需要在所有字段中填写默认值-用户的当前设置。
用户输入设置后,我发出一个异步GET请求,完成后,我需要将他的设置作为默认值传递给表单字段。
据我所知,我可以使用以下语法传递默认值:
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需要我在构造函数中立即初始化此表单组,但是我不能,因为异步请求需要一些时间,直到它字段为空为止。
此外,我认为使用HTML进行此操作要容易得多,例如通过使用ngModel,但这不适用于formControl或[value],但这也不是解决方案,因为表单控件只是忽略了我传递给[value]属性的信息,并且无法传递[value]进行选择,因为我不仅使用常规HTML,而且使用Ng-Zorro,并且它没有[value]属性。
解决方法
使用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
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。