如何在AngularJS响应式表单中初始化数组类型tips字段

要将你的tips数组正确初始化到响应式表单中，必须使用FormArray——Angular专门用来处理数组类型表单控件的类，直接用普通数组无法绑定表单控件并保持响应式特性。

步骤1：准备你的tips数据源 #

先把目标数组定义为组件内的变量（或者从接口/服务获取）：

private tipsData = [
  {
    "name": "gratuity_tip",
    "isActive": false,
    "orderType": []
  },
  {
    "name": "terminal_tip",
    "isActive": true,
    "orderType": [1, 4]
  }
];

步骤2：将数组转换为FormArray #

用formBuilder.array()把每个tip对象转换成对应的FormGroup，再组合成FormArray：

const tipsFormArray = this.formBuilder.array(
  this.tipsData.map(tip => 
    this.formBuilder.group({
      name: [tip.name],
      isActive: [tip.isActive],
      orderType: [tip.orderType]
    })
  )
);

步骤3：在表单初始化中替换原有的空数组 #

把生成的FormArray赋值给permission组内的tips字段：

完整的初始化函数代码：

initializeBusinessEposForm(): void {
  const tipsFormArray = this.formBuilder.array(
    this.tipsData.map(tip => 
      this.formBuilder.group({
        name: [tip.name],
        isActive: [tip.isActive],
        orderType: [tip.orderType]
      })
    )
  );

  this.businessEposForm = this.formBuilder.group({
    custom_pos_priority: new FormControl(false),
    custom_float_menu: new FormControl(false),
    epos_quick_code_print: new FormControl(false),
    permission: this.formBuilder.group({
      isEposCustomerData: new FormControl(false),
      stripe_terminal_processor: new FormControl(''),
      tips: tipsFormArray // 替换原有的[]
    }),
  });
}

后续操作（可选） #

如果需要动态修改tips数组（比如添加/删除元素），可以定义一个getter快速获取这个FormArray：

get tipsFormArray(): FormArray {
  return this.businessEposForm.get('permission.tips') as FormArray;
}

之后就可以用this.tipsFormArray.push(newTipGroup)或this.tipsFormArray.removeAt(index)来操作数组元素。

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