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

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

---

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

我还没有试过，但我有一些笔记可以帮你。 这意味着允许用户添加多个地址（注释基于中的教程）

buildAddress（）：FormGroup{
返回此.fb.group({
addressType:'主页'，
街1号：''，
第二街：''，
城市：''，
声明：''，
zip:'
});
}
this.customerForm=this.fb.group({
...
地址：this.fb.array（[this.buildAddress（）]））
});
创建正式阵列
this.myArray=newFormArray（[…]）；
或
this.myArray=this.fb.array（[…]）；
循环
复制输入元素
获取地址（）：FormArray{
将此.customerForm.get（'addresses'）作为FormArray返回；
}
addAddress（）：void{
this.addresses.push（this.buildAddress（））；
}
添加其他地址

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>