Angular中如何遍历FormBuilder Group的Controls？

你的核心问题是formGroup.controls是对象类型，而*ngFor只能遍历数组，因此直接遍历不会生效。以下是两种无需使用FormArray的可行方案：

方案1：组件内生成控件键数组 #

在组件类中添加一个getter，将控件对象的键转换为数组：

formGroup = this.fb.group({});

constructor(private readonly formBuilder: UntypedFormBuilder){}

ngOnInit() { this.setControls(); }

// 修正原代码拼写错误：settControls → setControls
setControls() {
 this.formGroup.addControl('name', this.fb.control('', Validators.required));
 this.formGroup.addControl('age', this.fb.control('', Validators.required));
 this.formGroup.addControl('alias', this.fb.control('', Validators.required));
}

// 获取控件键数组
get controlKeys(): string[] {
  return Object.keys(this.formGroup.controls);
}

模板中遍历键数组，通过键绑定formControlName：

<ng-container *ngFor="let key of controlKeys">
  <input type="text" [formControlName]="key" class="form-control">
  <!-- 可选：显示控件验证错误 -->
  <div *ngIf="formGroup.get(key)?.invalid && formGroup.get(key)?.touched">
    此字段为必填项
  </div>
</ng-container>

方案2：使用Angular自带的KeyValuePipe #

直接在模板中用KeyValuePipe将控件对象转换为键值对数组，无需修改组件代码：

<ng-container *ngFor="let controlEntry of formGroup.controls | keyvalue">
  <input type="text" [formControlName]="controlEntry.key" class="form-control">
  <!-- 可选：通过controlEntry.value访问控件实例 -->
  <div *ngIf="controlEntry.value.invalid && controlEntry.value.touched">
    此字段为必填项
  </div>
</ng-container>

注意：KeyValuePipe默认会按键的字母顺序排序，若需保留控件添加的原始顺序，可以自定义排序函数：

// 组件内定义排序函数
keepOriginalOrder(): number {
  return 0;
}

模板中使用：*ngFor="let controlEntry of formGroup.controls | keyvalue: keepOriginalOrder"

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