Angular响应式表单动态新增输入框值重复显示问题

我有一个包含动态输入字段的表单，页面中设置了新增按钮，点击该按钮即可创建一个新的输入框。

初始模板代码如下：

<form [formGroup]="userProfile" >
    <div *ngFor="let field of fields">
        <input id="username" formControlName="username" type="text" placeholder="Type something here...">
    </div>
    <button (click)="fields.push(fields.length)">Add Field</button>
</form>

初始表单构建逻辑如下：

this.userProfile =  this.fb.group({
  username: ['']
});

username表单控件未设置默认值，但存在异常问题：在已有输入框中输入文本后，点击按钮创建新输入框时，之前输入的内容会同步出现在新生成的输入框中。
手动编写函数清空新生成字段取值的方案属于临时hack，需要更规范简洁的实现方式。

当前所有动态生成的输入框都绑定了同一个username表单控件。Angular响应式表单中，同一个FormControl绑定到多个input元素时，所有元素会自动同步控件的当前值，自然会出现内容同步的现象——本质上你从来没有创建过新的表单控件，只是多渲染了一个绑定到同一控件的输入框而已。

动态增减的同类型输入字段，需要使用FormArray管理，这是Angular响应式表单针对动态字段场景设计的原生API，不需要编写额外的清空逻辑。

实现逻辑 #

• 初始化表单时，将动态字段集合定义为FormArray类型，初始可放入一个空的输入控件
• 点击新增按钮时，向FormArray中推入新的独立FormControl实例，而非操作普通数组
• 模板中遍历FormArray的控制项，保证每个输入框绑定对应索引的独立控件

修改后的组件代码 #

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  userProfile: FormGroup;

  // 获取FormArray实例的 getter，方便模板调用
  get usernameList(): FormArray {
    return this.userProfile.get('usernameList') as FormArray;
  }

  constructor(private fb: FormBuilder) {
    this.userProfile = this.fb.group({
      usernameList: this.fb.array([
        this.fb.control('') // 初始第一个空输入框
      ])
    });
  }

  addField(): void {
    // 新增字段时直接追加独立的空控件
    this.usernameList.push(this.fb.control(''));
  }
}

修改后的模板代码 #

<form [formGroup]="userProfile">
  <div *ngFor="let control of usernameList.controls; let i = index">
    <input 
      type="text" 
      [formControlName]="i" 
      placeholder="Type something here...">
  </div>
  <button type="button" (click)="addField()">Add Field</button>
</form>

注意：不要给循环渲染的input设置固定id，多元素共用同一id不符合HTML规范，如果需要绑定id可拼接索引值，比如[id]="'username-' + i"。

该方案是Angular官方推荐的动态表单标准写法，每个输入字段对应独立的FormControl实例，值完全独立不会互相污染，也方便后续扩展字段校验、批量取值、字段删除等功能，不需要任何hack式的兼容逻辑。

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