Angular响应式表单中如何为FormArray数组初始化预设值

错误原因 #

你遇到的Cannot find control with path: 'channel -> 0 -> canais'报错是两个问题共同导致的：

1. 初始化channel FormArray时，你直接把this.aplicativo.channel整个原始数组作为第一个元素传入，相当于把数组嵌套了一层，FormArray的第一个元素是完整的原始数组，而非单个channel对象，自然找不到canais控件。
2. 原始的this.aplicativo.channel是普通JS对象数组，不是Angular表单需要的FormGroup实例，必须手动转换为对应结构的FormGroup才能和模板的表单控件绑定。

修改方案 #

你需要在初始化表单前，先把已有的channel数据遍历转换为符合结构的FormGroup，再传给FormArray。同时要兼容新建场景下无预设数据的情况。

1. 修改组件类的ngOnInit逻辑 #

aplicativo = this.activatedRoute.snapshot.data['aplicativo'];

ngOnInit(): void {
  // 预处理channel数据，转换为FormGroup数组
  const channelFormGroups: FormGroup[] = [];
  // 编辑场景有预设数据时遍历转换
  if (this.aplicativo.channel && Array.isArray(this.aplicativo.channel)) {
    this.aplicativo.channel.forEach(chanItem => {
      channelFormGroups.push(
        this._formBuilder.group({
          canais: [chanItem.canais],
          topicos: [chanItem.topicos]
        })
      )
    })
  }
  // 新建场景如果需要默认显示一条空channel，可放开下面注释的代码
  // else {
  //   channelFormGroups.push(
  //     this._formBuilder.group({
  //       canais: [],
  //       topicos: []
  //     })
  //   )
  // }

  this.form = this._formBuilder.group({
    id: [this.aplicativo.id],
    name: [this.aplicativo.name, Validators.required],
    version: [this.aplicativo.version, Validators.required],
    appId: [this.aplicativo.appId, Validators.required],
    // 直接传入转换好的FormGroup数组即可
    channel: this._formBuilder.array(channelFormGroups),
  });
}

get channel() {
  return this.form?.controls['channel'] as FormArray;
}

addChanels() {
  const channelArray = this._formBuilder.group({
    canais: [],
    topicos: [],
  });
  this.channel.push(channelArray);
}

// 你模板里用到了删除方法，补充下对应的逻辑
deleteChannels(index: number) {
  this.channel.removeAt(index);
}

2. 注意事项 #

• 请确认后端返回的aplicativo.channel每个子项都包含canais和topicos字段，字段名大小写必须和表单里的定义完全一致。
• 你的现有模板、Resolver和路由配置无需修改。

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