Angular2：如何用静态数据预填表单字段并点击生成空白区块

问题分析 #

嘿，我看到你在Angular Reactive Forms这里卡壳了！问题其实出在代码的执行顺序上——你先调用了patchValue，然后立刻重新创建了整个emergencyContactForm，这就把之前的赋值操作完全覆盖掉啦，自然看不到数据填充效果。

下面我一步步教你怎么实现需求：静态数据填充表单区块 + 点击添加空白区块。

正确实现步骤 #

1. 先定义表单基础结构 #

首先要确保你的createItem()方法返回一个包含所需字段的FormGroup，支持传入已有数据初始化表单行：

private createItem(contact?: any): FormGroup {
  return this._fb.group({
    ContactName: [contact?.ContactName || '', Validators.required],
    Phone: [contact?.Phone || '', Validators.required],
    Relationship: [contact?.Relationship || '', Validators.required]
  });
}

2. 用静态数据初始化表单 #

不要先patch再重建表单，而是直接用你的Emergencies数组来初始化FormArray：

emergencyContactForm: FormGroup;
// 假设你的静态应急联系人数据结构如下
Emergencies = [
  { ContactName: '张三', Phone: '13800138000', Relationship: '父亲' },
  { ContactName: '李四', Phone: '13900139000', Relationship: '母亲' }
];

constructor(private _fb: FormBuilder) {}

ngOnInit(): void {
  // 把静态数据转换成FormGroup数组，填充到FormArray里
  const itemRows = this.Emergencies.map(contact => this.createItem(contact));
  this.emergencyContactForm = this._fb.group({
    itemRows: this._fb.array(itemRows)
  });
}

// 快速获取FormArray的便捷方法（模板里会用到）
get itemRows(): FormArray {
  return this.emergencyContactForm.get('itemRows') as FormArray;
}

3. 实现添加空白区块的方法 #

只需要往FormArray里push一个新的空表单行即可：

addBlankRow(): void {
  this.itemRows.push(this.createItem());
}

4. 模板部分的写法 #

对应的HTML要循环渲染FormArray里的每一行，同时添加“添加空白区块”按钮：

<form [formGroup]="emergencyContactForm">
  <div formArrayName="itemRows">
    <!-- 循环渲染每一个应急联系人表单区块 -->
    <div *ngFor="let row of itemRows.controls; let i = index" [formGroupName]="i">
      <h3>应急联系人 {{i + 1}}</h3>
      <label>姓名：</label>
      <input formControlName="ContactName" type="text">
      
      <label>电话：</label>
      <input formControlName="Phone" type="tel">
      
      <label>关系：</label>
      <input formControlName="Relationship" type="text">
    </div>
  </div>
  
  <!-- 添加空白区块按钮 -->
  <button type="button" (click)="addBlankRow()">添加新的应急联系人</button>
</form>

补充：后续更新表单数据的正确姿势 #

如果之后你需要修改某个表单行的数据，再用patchValue就没问题了，比如修改第一行：

this.itemRows.at(0).patchValue({
  ContactName: '更新后的姓名',
  Phone: '更新后的电话'
});

这样就能完美实现你要的功能啦——初始加载静态数据填充两个表单区块，点击按钮可以添加空白区块。

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