Angular 动态表单值设置及问题处理
:: 需求
使用
angular
中的动态表单设置初始值
:: 解决方案
:: 方式一 ::
官方说明:1)为表单控件设置新值;2)修补控件的值
formGroup.controls[fieldName].setValue(value)
==OR==
formGroup.controls[fieldName].patchValue(value)
:: 方式二 ::
官方说明:
get()
,检索给定控件的名称或路径的子控件
使用
get()
方法获取到控件后,再通过setValue
为控件设置值
formGroup.get(fieldName)?.setValue(value)
:: 方式三 ::
官方说明:修补
FormGroup
的值。它接受以控件名称作为键的对象,并尽力将值与组中的正确控件进行匹配
即可设置单独任意字段内容
formGroup.patchValue({fieldName: value})
:: 方式四 ::
官方说明:设置
FormGroup
的值。它接受一个与组结构匹配的对象,以控件名称作为键
注意:使用这种方式设置,必须给表单中所有字段都设定值才能成功
formGroup.setValue({fieldName1: value1,fieldName2: value2, ...
})
:: 踩坑
:: 坑一 ::
若表单使用的是自定义校验,在自定义校验方法内存在无法访问到外部类中的上下文对象,可通过
闭包
的方式解决造成这种问题的原因是,函数中的
this
指向始终是指向调用者对象
:: 坑二 ::
使用动态(响应式)表单前,需要在
xx.module.ts
文件中引入ReactiveFormsModule
才能正常使用,如下为在app.module.ts
中引入
import { FormsModule, ReactiveFormsModule } from '@angular/forms';@NgModule({imports: [FormsModule,ReactiveFormsModule,],
})
:: 坑三 ::
表单控件缓存问题,
input
框内容存在缓存问题,可使用以下方式清除
<!--整个表单禁止-->
<form autocomplete="off"></form>
===OR===
<!--单独禁止某个控件-->
<input autocomplete="off" />
衍伸阅读
@angular/forms
FormGroup
FormControl