Angular Form Array绑定模板输入仅单次输入一个字符，绑定方式是否有误？

你说得没错，当前的模板绑定方式确实不正确，这正是输入框只能单次输入一个字符的根源。

为什么你的绑定会出问题？ #

你在*ngFor里遍历的是myForm.get('hobbies').value——这是表单数组的值数组，每次输入框内容变化时，表单的value会重新生成一个新数组对象。Angular的*ngFor依赖于集合的引用稳定性，当引用变化时，它会销毁旧的DOM元素并重新渲染新的，这就导致输入框每次输入后都会被重新创建，看起来像是只能输入一个字符。

Form Array绑定到模板的正确方法 #

步骤1：在组件中添加表单数组的Getter

为了方便模板访问且代码更清晰，建议在组件类里定义一个getter来获取表单数组：

import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';

// 假设你的组件类里已经初始化了myForm
get hobbies(): FormArray {
  return this.myForm.get('hobbies') as FormArray;
}

步骤2：模板中遍历表单数组的Controls

在模板里，我们需要遍历表单数组的controls集合（而不是value），因为controls是表单控件的稳定引用集合，不会随值变化而重新生成：

<div class="form-group" *ngFor="let hobby of hobbies.controls; let i = index;">
  <input type="text" class="form-control" [formControlName]="i">
</div>

这里用[formControlName]="i"的属性绑定方式比字符串插值formControlName="{{ i }}"更严谨，推荐使用。

补充：表单数组初始化的更清晰写法

你原来的初始化代码是可行的，但显式创建FormControl会让代码可读性更强：

this.myForm = this.formBuilder.group({
  hobbies: this.formBuilder.array([
    // 显式创建FormControl，替代简写的['', Validators.required]
    this.formBuilder.control('', Validators.required)
  ])
});

额外提示：动态添加/删除表单控件 #

如果需要动态添加更多爱好输入框，可以在组件里添加对应的方法：

addHobby() {
  this.hobbies.push(this.formBuilder.control('', Validators.required));
}

removeHobby(index: number) {
  this.hobbies.removeAt(index);
}

然后在模板里添加按钮调用这些方法即可。

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