Angular14中如何为FormGroup赋值API返回的模型数据（不使用setValue）

你的代码核心问题在于：FormGroup在组件初始化阶段就已创建，此时data是默认的空Candidate实例（first_name和last_name都是空字符串）。后续API返回数据更新data后，表单控件并不会自动同步新值——因为FormControl的初始值是一次性赋值，不会和data的属性建立自动绑定关系。

另外你尝试把FormGroup移入setformValue函数时出错，大概率是因为没有正确声明addCandidate的类型，或者模板在FormGroup创建完成前就尝试访问它，导致空指针异常。

下面提供两种可行的实现方式，你可以根据需求选择：

方案一：获取数据后重新初始化FormGroup #

这种方式直接在拿到API返回的数据后，创建新的FormGroup并赋值给addCandidate，确保表单控件使用最新的Candidate数据。

修改后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { CandidateService } from './candidate.service';
import { Candidate } from './candidate.model';
import { AppConstants } from './app.constants';

export class EditCandidateComponent implements OnInit {
  candidateData: any;
  response: any;
  editCandidateSubmitted = false;
  data = new Candidate();
  // 仅声明FormGroup类型，不提前初始化
  addCandidate!: FormGroup;

  constructor(private route: ActivatedRoute, private candidateService: CandidateService) { }

  ngOnInit(): void {
    this.getCandidate(this.route.snapshot.params.id);
  }

  getCandidate(id: any) {
    this.candidateService.getCandidate(id).subscribe(
      (resp: Candidate) => { 
        this.setformValue(resp);
      },
      (err: any) => {
        console.log(err+'new');
      }
    );
  }

  setformValue(updateValue: Candidate) {
    this.data = updateValue;
    // 用最新的data初始化FormGroup
    this.addCandidate = new FormGroup({
      first_name: new FormControl(this.data.first_name, [
        Validators.required,
        Validators.pattern(AppConstants.OnlyAlphabetic),
      ]),
      last_name: new FormControl(this.data.last_name, [
        Validators.required,
        Validators.pattern(AppConstants.OnlyAlphabetic),
      ]),
    });
    console.log(this.data);
  }

  get candidateFormControl() {
    // 用可选链避免FormGroup未初始化时的错误
    return this.addCandidate?.controls;
  }
  
  onSubmit() {
    // 提交逻辑实现
  }
}

模板修改（关键） #

在表单外层添加*ngIf="addCandidate"，确保只有当FormGroup创建完成后才渲染表单，避免空指针错误：

<form [formGroup]="addCandidate" (ngSubmit)="onSubmit()" *ngIf="addCandidate">
  <div>
    <label>名字:</label>
    <input formControlName="first_name" />
    <div *ngIf="candidateFormControl?.first_name?.invalid && (candidateFormControl.first_name.dirty || candidateFormControl.first_name.touched)">
      <span *ngIf="candidateFormControl.first_name.errors?.['required']">名字不能为空</span>
      <span *ngIf="candidateFormControl.first_name.errors?.['pattern']">只能输入字母</span>
    </div>
  </div>
  <div>
    <label>姓氏:</label>
    <input formControlName="last_name" />
    <div *ngIf="candidateFormControl?.last_name?.invalid && (candidateFormControl.last_name.dirty || candidateFormControl.last_name.touched)">
      <span *ngIf="candidateFormControl.last_name.errors?.['required']">姓氏不能为空</span>
      <span *ngIf="candidateFormControl.last_name.errors?.['pattern']">只能输入字母</span>
    </div>
  </div>
  <button type="submit" [disabled]="addCandidate.invalid">提交</button>
</form>

方案二：逐个更新FormControl的值 #

如果你不想重新创建FormGroup，可以直接给每个表单控件单独赋值（避开FormGroup.setValue，但使用单个FormControl.setValue）：

修改setformValue函数 #

setformValue(updateValue: Candidate) {
  this.data = updateValue;
  // 逐个设置控件值
  this.addCandidate.controls['first_name'].setValue(this.data.first_name);
  this.addCandidate.controls['last_name'].setValue(this.data.last_name);
}

说明 #

如果你的特殊需求允许使用patchValue，也可以用一行代码完成赋值（patchValue支持部分更新，比逐个设置更简洁）：

setformValue(updateValue: Candidate) {
  this.data = updateValue;
  this.addCandidate.patchValue(this.data);
}

组件初始化时，addCandidate就已经用初始的空Candidate实例创建完成，后续data的更新不会触发FormControl值的变化——因为FormControl的初始值是静态的，不会和data的属性建立双向绑定。

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