Angular响应式表单如何填充接口返回数据实现编辑回显

接口能正常返回数据的前提下，不需要手动操作输入框DOM，直接调用Angular FormGroup自带的API就能完成数据回填。

具体修改步骤 #

1. 在接口订阅回调中给表单赋值 #

你之前只在接口返回后存了invoice变量，在这里加表单赋值逻辑即可，优先用patchValue方法，容错性更高，哪怕接口返回字段比表单多也不会抛错：

ngOnInit(): void {
 this.id = this.route.snapshot.params['id'];
 this._http
 .get('http://localhost:8085/invoice/get-invoice/'+this.id)
 .subscribe((response: any) => {
   this.invoice = response;
   // 回填表单数据，字段和formControlName一一对应
   this.editStudentform.patchValue({
     serialNumber: response.serialNumber,
     status: response.status,
     customerSerialNumber: response.customerSerialNumber,
     employeeSerialNumber: response.employeeSerialNumber
   })
 });
}

如果能保证接口返回的字段名和你定义的表单控件名完全一致，也可以直接传整个响应对象：this.editStudentform.patchValue(response)，省去逐字段映射的代码。
不推荐在这里用setValue，这个方法要求必须传入表单所有控件的对应值，少传一个字段就会抛错，编辑场景用patchValue更灵活。

2. 修正HTML模板的问题 #

你当前第一个输入框后面写的invoice.serialNumber是静态纯文本，不会绑定到输入框中；而且你已经用formControlName做了响应式表单绑定，只要表单赋值成功，输入框会自动展示对应值，把多余的静态文本删掉即可。
另外你现在用a标签同时绑定路由跳转和提交事件，会出现点击后直接跳转、不等接口提交完成的问题，建议把提交事件绑到form标签上，用原生button做提交按钮，还能自动触发表单校验：

<form class="form" [formGroup]="editStudentform" (ngSubmit)="editStudent()">
  <div class="user-box">
    <input name="serialNumber" required formControlName="serialNumber" type="number">
    <label>serial Number</label>
  </div>
  <div class="user-box">
    <input name="status" required formControlName="status" type="text">
    <label>status</label>
  </div>
  <div class="user-box">
    <input name="customerSerialNumber" required formControlName="customerSerialNumber" type="text">
    <label>customer Serial Number</label>
  </div>
  <div class="user-box">
    <input name="employeeSerialNumber" required formControlName="employeeSerialNumber" type="text">
    <label>employee Serial Number</label>
  </div>
  <button type="submit" [disabled]="editStudentform.invalid" routerLink="/invoics" routerLinkActive="active">
    提交
  </button>
</form>

3. 优化提交逻辑 #

你当前的更新接口没拼接目标数据id，后端无法识别要更新的条目；另外不需要逐个控件取值，直接拿表单的value属性即可，还可以加表单校验判断，避免无效提交：

editStudent(){
  // 表单校验不通过直接终止提交
  if(this.editStudentform.invalid) return;
  const formData = this.editStudentform.value;
  // 拼接要更新的条目id
  const url = `http://localhost:8085/invoice/update/${this.id}`;
  this._http.put(url, formData).subscribe(data=>{
    console.log(data)
    alert("row edited");
  })
}

注意事项 #

• 不要用原生DOM操作（比如getElementById修改input的value）的方式给表单赋值，会破坏响应式表单的状态追踪，导致校验、取值逻辑异常
• 如果接口返回字段存在null/undefined的情况，最好在patchValue之前做兜底处理（比如赋值为空字符串/0），避免数字输入框显示异常
• 后续如果需要重置表单，直接调用this.editStudentform.reset()即可，也可以传入默认值作为重置后的初始状态

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