Angular根据数组动态创建FormControl问题求助

你的代码出现undefined Form主要有三个问题，直接修正如下：

问题分析 #

• 变量名错误：代码里用this.e遍历，但实际定义的数组是myArr，遍历undefined会导致生成空结构
• 遍历方式不对：map返回数组，而fb.group()需要接收键值对对象，不是数组
• 属性值处理错误：原数组中每个对象的属性值是数组（比如"name": ["Ivan"]），直接取i.name会把数组作为FormControl的值，应该取数组第一个元素

修正后的代码 #

const myArr = [ { "name": [ "Ivan" ] }, { "surname": [ "avan" ] } ]
form!: FormGroup;

constructor(private fb: FormBuilder){
  // 用reduce把数组转换成FormGroup需要的键值对对象
  const formControls = myArr.reduce((acc, item) => {
    // 获取当前对象的唯一属性名（name或surname）
    const key = Object.keys(item)[0];
    // 取数组的第一个元素作为FormControl的初始值
    const value = item[key][0];
    // 向累加对象中添加FormControl配置
    acc[key] = [value];
    return acc;
  }, {} as {[key: string]: any});

  this.form = this.fb.group(formControls);
}

这段代码通过reduce将数组转换为FormBuilder.group()需要的键值对结构，同时正确提取每个属性的初始值，最终能生成包含动态FormControl的有效FormGroup。

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