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

:: 更多内容 ::

> 开发过程中踩坑经验记录