При добавлении новой строки в таблицу при нажатии кнопки каждая строка таблицы содержит элементы управления реактивной формы

Question

Как можно динамически добавить строку, нажимая кнопку в Angular 9, каждая строка содержит поля реактивной формы с Angular Материал. 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>