Angular FormArray设置FormControlName问题：无法关联输入框

你的代码存在两个核心问题导致输入框无法和FormArray正确关联：

1. FormArray项的结构设计不匹配输入需求：你用FormControl包裹了一个对象（如{ de: '' }），但输入框只能处理单一值，无法直接关联到对象内部的属性。
2. 模板中formControlName的绑定方式错误：formControlName="{{i}}"是字符串插值，而该指令需要属性绑定（表达式），正确写法应为[formControlName]="i"。

下面提供两种解决方案，推荐第二种更符合Angular表单设计规范的实现方式：

方案1：适配现有FormControl包裹对象的结构 #

如果要保留当前的FormArray结构，你可以直接绑定到数组中的FormControl实例，并手动处理输入值与对象属性的关联：

修改后的模板 #

<form [formGroup]="translationForm">
  <div formArrayName="translations">
    <div *ngFor="let translation of translations.controls; index as i">
      <!-- 按需替换为实际需要编辑的语言属性，如en -->
      <input 
        type="text" 
        [formControl]="translation"
        [value]="translation.value.de"
        (input)="translation.patchValue({ de: $event.target.value })"
      />
    </div>
  </div>
</form>

说明 #

• 用[formControl]="translation"直接绑定到数组中的FormControl实例，替代错误的formControlName写法。
• 通过[value]显示当前对象中的属性值，(input)事件触发时用patchValue更新FormControl的对象值。

方案2：重构为FormArray包含FormGroup（推荐） #

更合理的设计是让FormArray中的每个项为FormGroup，每个语言字段对应一个FormControl，这样能更直观地关联输入框：

修改后的Form定义 #

this.translationForm = new FormGroup({
  translations: new FormArray([]),
});

// 添加德语翻译项
this.translations.push(
  new FormGroup({
    de: new FormControl('', [Validators.required])
  })
);

// 添加英语翻译项
this.translations.push(
  new FormGroup({
    en: new FormControl('', [Validators.required])
  })
);

修改后的模板 #

<form [formGroup]="translationForm">
  <div formArrayName="translations">
    <div *ngFor="let translation of translations.controls; index as i" [formGroupName]="i">
      <input type="text" formControlName="de" *ngIf="translation.get('de')" />
      <input type="text" formControlName="en" *ngIf="translation.get('en')" />
    </div>
  </div>
</form>

说明 #

• 每个数组项是FormGroup，包含对应语言的FormControl，符合表单数据的层级结构。
• 模板中用[formGroupName]="i"指定当前FormGroup，然后通过formControlName直接绑定到内部的语言控件，无需手动处理值的映射。

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