Angular - 如何从现有数组启动 FormArray?

Lie*_*iem 5 forms datatable angular formarray

我想用 FormArray 创建一个可编辑的表格。

为此,我有results在表中呈现的属性。

用 FormArray 数据初始化它的正确方法是什么?

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
  this.tableForm = this.fb.group({
    arrayForm: this.fb.array([])
  });
}
Run Code Online (Sandbox Code Playgroud)

小智 6

表单数组是一组表单控件(提醒一下,表单组是一个表单控件)。

在下文中,我将假设您的结果与模型相关,例如

[
  { id: 1, title: 'title 1' },
  { id: 2, title: 'title 2' },
]
Run Code Online (Sandbox Code Playgroud)

(如果没有,请随时向我解释结果是什么)

由于表单数组必须接受控件,因此您必须映射结果以符合签名。

你可以这样做:

ngOnInit(private fb: FormBuilder) {
 this.tableForm = this.fb.group({
   arrayForm: this.fb.array(this.results.map(r => this.fb.group(r)))
 });
}
Run Code Online (Sandbox Code Playgroud)

有了这个,您的表单数组将包含一个表单组,由您对象中的所有属性组成。

这是你想要的还是不想要的?