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

:: 更多内容 ::

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

你可能感兴趣的:(Angular,web前端,框架,前端,angular,form表单,typescript)