Angular

Question

我想用 FormArray 创建一个 editable table。

为此，我在 table 中呈现 results 属性。

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

results: Array;
tableForm: FormGroup;

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

Answer 1

您可以基于 OBJECT（不是接口）创建数组。

其实我前几天写了一篇small demo：

我们的目标 (!):

 valueFromBackend = {
    propOne: 'X',
    propTwo: 'Y',
    propArray: [
      {
        objPropA: 'a',
        objPropB: 'b'
      },
      {
        objPropA: 'c',
        objPropB: 'd'
      },
      {
        objPropA: 'e',
        objPropB: 'f'
      }
    ]
  }

分量：

ngOnInit() {
    const count = this.valueFromBackend.propArray.length

    this.myForm = this.fb.group({
      propOne: '',
      propTwo: '',
      propArray: this.fb.array([...this.createItems(count)])
    });

    // dynamically set value
    this.myForm.setValue(this.valueFromBackend);
  }

  private createItem(): FormGroup {
    return this.fb.group({
      objPropA: '',
      objPropB: '',
    });
  }

  private createItems(count: number): FormGroup[] {
    const arr = [];
    for (let i = 0; i < count; i++) {
      arr.push(this.createItem());
    }
    return arr;
  }

HTML:

<form [formGroup]="myForm">
    <div formArrayName="propArray" *ngFor="let item of myForm.get('propArray').controls; let i = index;">
        <div [formGroupName]="i">
            <input formControlName="objPropA" placeholder="Item name">
      <input formControlName="objPropB" placeholder="Item description">
  </div>
  </div>
</form>

Answer 2

表单数组是一组表单控件（提醒一下，表单组就是一个表单控件）。

下面我假设你的结果是模型相关的，比如

[
  { 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？

Angular - How to initiate FormArray from existing an array?

forms

datatable

formarray