Angular FormGroup忽略Web API返回的预设值自动设为null如何解决？

问题根因 #

你在使用Angular响应式表单时混用了模板驱动的[value]绑定，响应式表单的控件值唯一数据源是TS中定义的FormControl实例，模板侧的[value]赋值优先级低于FormControl的默认值，会被直接忽略，只有手动输入的内容才会被FormControl同步捕获，因此会出现预设值丢失的问题。

解决方案 #

步骤1：删除模板中多余的[value]绑定 #

响应式表单会自动将FormControl的值同步到输入框，不需要手动绑定value，修改后的HTML代码如下：

<form [formGroup]="persoForm" (ngSubmit)="onSubmit()">
    <div id="firma">
        <mat-form-field appearance="standard" id="firm" floatLabel="always">
            <mat-label> Firmenbez.:</mat-label>
            <input matInput type="text" name="firm" formControlName="firmenBez"/>
        </mat-form-field>
    </div>
</form> 

步骤2：在TS侧给FormControl赋值 #

根据你的数据获取场景二选一即可：

场景A：组件初始化时person数据已经存在

直接在创建FormControl时传入初始值：

persoForm = new FormGroup({
    firmenBez: new FormControl(this.person.firmenbezeichnung ?? ''),
})

onSubmit(){ 
  console.log(this.persoForm.getRawValue());
}

场景B：person是从Web API异步获取的

在API请求成功的回调中调用patchValue方法给表单批量赋值：

persoForm = new FormGroup({
    firmenBez: new FormControl(''),
})

// 示例API请求方法
fetchPersonData() {
  this.yourApiService.getUserInfo().subscribe(res => {
    this.person = res;
    // 给表单填充预设值
    this.persoForm.patchValue({
      firmenBez: this.person.firmenbezeichnung
    })
  })
}

onSubmit(){ 
  console.log(this.persoForm.getRawValue());
}

patchValue支持只给部分表单控件赋值，不需要匹配所有控件字段，适配异步数据加载场景。

内容的提问来源于stack exchange，提问作者Chopper