如何在 angular 9 中制作动态表

Question

我知道如何在 angular 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]],
    });

上面的代码可以生成如下所示的简单表单

现在想做一个动态的表格，由上面简单表格的多行组成。所以用户可以添加/删除一行简单的表格。

我认为需要在angular中的FormBuilderclass中应用addControl和removeControl等方法，但具体如何实现

Answer 1

您的 FormGroup 应该包含一个 FormArray 并且在这个中，您必须按照您的描述添加控件。

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

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

通过这种方式，您将能够add/remove控制。

您可以定义一个方法，它将 return 您类型的 FormGroup：

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

然后你必须定义一些方法来 add/remove a FormGroup to/from FormArray:

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[=34= 中的每个 FormGroup ]:

<button (click)="addFormGroup()"> ADD </button> <form [formGroup]="form"> <div formArrayName="entries"> <div *ngFor="let entry of formEntries.controls; let i = index" [formGroupName]="i">  <button (click)="deleteFormGroup(i)"> DELETE </button> </div> </div> </form>

如何在 angular 9 中制作动态表

how to make dynamic tables in angular 9

angular

angular-forms