如何在角度9中制作动态表格

Question

我知道如何用角度9创建表格。

    import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
    this.form = this.fb.group({
       name: [null, [Validators.required]],
       description: [null, []],
       length: [0, [Validators.required]],
       precision: [0, [Validators.required]],
       type: [0, [Validators.required]],
    });

上面的代码将形成一种简单的形式，如下所示

现在，我想制作一个动态表格，该表格由上面简单表格的多行组成。因此，用户可以添加/删除一行简单的表单。

我认为它需要以一定角度应用FormBuilder类中的addControl和removeControl之类的方法，但是如何具体实现它

Answer 1

您的 FormGroup 应该包含一个 FormArray ，在这一步中，您必须按照说明添加控件。

因此，首先，您必须像这样更改表单声明：

this.form = this.formBuilder.group({
    entries: this.formBuilder.array([]);
 });

通过这种方式，您将能够添加/删除控件。

您可以定义一个方法，该方法将返回您类型的 FormGroup ：

createFormGroup(): FormGroup {
  return new FormGroup({
       name: [null, [Validators.required]],
       description: [null, []],
       length: [0, [Validators.required]],
       precision: [0, [Validators.required]],
       type: [0, [Validators.required]],
   })
}

然后，您必须定义一些方法来向 FormArray 中添加/删除 FormGroup ：

addFormGroup(): void {
   this.formEntries.push(this.createFormGroup());
}

deleteFormGroup(index: number): void {
   this.formEntries.removeAt(index);
}

get formEntries(): FormArray {
   return this.form.controls.entries as FormArray;
}

在 HTML 中，您必须列出 FormArray 中的每个 FormGroup ：

<button (click)="addFormGroup()"> ADD </button>

<form [formGroup]="form">
   <div formArrayName="entries">
      <div *ngFor="let entry of formEntries.controls; let i = index" [formGroupName]="i">
        <!-- add each FormControl -->

        <button (click)="deleteFormGroup(i)"> DELETE </button>
      </div>
   </div>
</form>