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

标签 angular forms datatable formarray

我想用 FormArray 创建一个可编辑的表格。
为此,我有 results在表中呈现的属性。
用 FormArray 数据初始化它的正确方法是什么?

results: Array;
tableForm: FormGroup;

ngOnInit(private fb: FormBuilder) {
  this.tableForm = this.fb.group({
    arrayForm: this.fb.array([])
  });
}

最佳答案

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

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

[
  { id: 1, title: 'title 1' },
  { id: 2, title: 'title 2' },
]

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

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

你可以这样做:
ngOnInit(private fb: FormBuilder) {
 this.tableForm = this.fb.group({
   arrayForm: this.fb.array(this.results.map(r => this.fb.group(r)))
 });
}

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

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

关于Angular - 如何从现有数组启动 FormArray?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58132003/

相关文章:

c# - 填充数据集时 ODP.net Oracle 十进制数精度问题。异常 : Arithmetic operation resulted in an overflow

http - 如何读取 Angular 2 中收到的 header ?

php - 使用数据表列出 select/selectall 行以通过脚本选择行,那么我如何设置/获取所选行的动态 ID

javascript - 在 Angular 2+ 中使用 Typescript/JavaScript 从对象中删除重复字段

javascript - AngularJS:将表单字段的值设置为各种对象属性

javascript - 在硬编码处理程序周围包装 jquery 事件处理程序

jQuery Validate 插件submitHandler 延迟表单提交

c# - 继承时缺少方法异常

angular - Angular 中的深度复制对象

asp.net - 如何将 Angular Material 添加到 asp.net Angular 模板