Angular为Record每个属性生成表单输入字段失败如何解决

• 类型定义不匹配：你将paramsFormArray声明为FormArray类型，但fb.group()返回的是FormGroup实例，类型冲突会直接导致表单初始化失败
• 模板缺少对应遍历绑定逻辑：无论使用FormGroup还是FormArray，都需要遍历表单控件集合，为每个输入框绑定对应控件，仅修改TS侧的表单构建API无法实现预期效果

这个方案不需要转换现有properties的对象结构，代码最简洁，完全匹配你的键值对渲染需求。

TS侧修正代码 #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 修正类型为FormGroup，和fb.group()返回值类型匹配
  paramsForm: FormGroup;
  properties: Record<string, number> = { a: 1, b: 2 };

  constructor(private fb: FormBuilder) {
    // 直接传入properties初始化，每个属性会自动生成对应FormControl
    this.paramsForm = this.fb.group(this.properties);
  }

  // 提供给模板遍历用的键名列表
  get controlKeys(): string[] {
    return Object.keys(this.paramsForm.controls);
  }
}

HTML模板代码 #

<form [formGroup]="paramsForm">
  <div *ngFor="let key of controlKeys" class="form-item">
    <span>{{ key }} = </span>
    <input type="number" [formControlName]="key" />
  </div>
</form>

渲染效果完全符合预期：

a = [1  ]
b = [2  ]

后续如果给properties新增c、d属性，只要同步给paramsForm添加对应控件，模板会自动渲染新的输入项。

如果你确实需要使用FormArray，需要先把properties对象转换成结构化的数组控件，再做遍历绑定。

TS侧代码 #

import { Component } from '@angular/core';
import { FormArray, FormBuilder } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  paramsFormArray: FormArray;
  properties: Record<string, number> = { a: 1, b: 2 };

  constructor(private fb: FormBuilder) {
    // 将对象转成包含key、value字段的FormGroup数组
    this.paramsFormArray = this.fb.array(
      Object.entries(this.properties).map(([key, val]) => 
        this.fb.group({
          key: [key],
          value: [val]
        })
      )
    );
  }
}

HTML模板代码 #

<div>
  <div *ngFor="let item of paramsFormArray.controls; let i = index" [formGroup]="item">
    <span>{{ item.get('key').value }} = </span>
    <input type="number" formControlName="value" />
  </div>
</div>

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