Angular响应式表单如何设置默认值？接口数据无法正常回显

问题根源梳理 #

1. 表单控件名不匹配：组件中表单组定义的是memberName，但HTML输入框的formControlName写的是memName，导致表单绑定逻辑失效。
2. 未给demo对象赋值：HTTP请求获取数据后，仅将结果赋值给market和marketArr，未同步给demo，因此{{demo.memName}}始终显示初始的null。
3. 响应式表单误用value属性：手动设置value="{{demo.memName}}"会与响应式表单的自动绑定机制冲突，无法正确同步值。

修正后的组件代码 #

// 初始化demo对象，避免undefined报错
demo: { memName?: number } = {};

// 表单初始化：统一控件名与HTML保持一致
this.retrieveData = fb.group({
  'memName': ['', Validators.required]
});

ngOnInit() {
  const url = 'http://localhost/api/';
  this.http.get(url).subscribe({
    next: (res: any) => {
      this.market = res[0];
      this.marketArr = JSON.parse(JSON.stringify(res));
      
      // 将接口返回的真实值赋值给demo
      this.demo.memName = this.market.memName; // 根据接口实际返回字段调整
      
      // 用patchValue设置表单默认值
      this.retrieveData.patchValue({
        memName: this.demo.memName
      });
      
      this.showmap();
    },
    error: (err: any) => {
      this.marketArr = err;
    }
  });
}

修正后的HTML代码 #

<form [formGroup]="retrieveData" (ngSubmit)="memInfo(retrieveData.value)" class="ui form">
  <mat-form-field class="name">
    <mat-label>Info.</mat-label>
    <!-- 移除手动设置的value属性，依赖formControlName自动绑定 -->
    <input type="number" matInput formControlName="memName">
  </mat-form-field>
</form>

额外提示 #

• 如果接口返回的字段名与表单控件名完全匹配，可直接用this.retrieveData.patchValue(this.market)批量赋值，无需逐个设置。
• 若demo对象无需单独维护，也可直接将表单值与接口返回数据绑定，省略demo中间层。

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