在单击按钮的同时向表中添加新行，每个表行都包含反应式表单控件

Question

如何在Angular 9中单击按钮时动态添加一行，每行都包含用Angular Material生成的反应形式字段。GUI如下所示：GUI

我想做的是添加一个与第一行具有相同字段的新行，并在FormGroup数组中管理这些行。

Answer 1

我还没有尝试过，但我有一些笔记可能会对您有所帮助。这意味着允许用户添加多个地址(基于@DeborahK教程的注释(

buildAddress(): FormGroup {
return this.fb.group({
addressType: 'home',
street1: '',
street2: '',
city: '',
state: '',
zip: ''
});
}
this.customerForm= this.fb.group({
...
addresses: this.fb.array([this.buildAddress()])
});

Creating a FormArray
this.myArray= newFormArray([...]);
or
this.myArray= this.fb.array([...]);
Looping
<div formArrayName="addresses"
*ngFor="let address of addresses.controls; let i=index">
<div [formGroupName]="i">
Duplicate the Input Elements
get addresses(): FormArray {
return this.customerForm.get('addresses') as FormArray;
}
addAddress(): void {
this.addresses.push(this.buildAddress());
}
<button class="btnbtn-primary" type="button" (click)="addAddress()"> Add Another Address </button>