Мне нужно отобразить список в <table>, а также динамически добавить строку в форме Reactive

Question

В HTML:

<form [formGroup]="myform">
<table>
<tr *ngFor="let item of items">
<td>
<input type="text" [(ngModel)]="item.name" formControlName="item.name"/>
</td>
</tr>
</table>
<button (click)="addRow()">ADD Row </button>
</form>

Изначально у меня есть одни данные, поэтому я связываю их в текстовом поле. Когда я нажимаю кнопку Добавить, мне нужно добавить пустую строку текстового поля.

В component.ts

ngOninit(){
this.myform= formBuilder.group([
item.name : new FormControl('',Validators.Required);
]);
}

Я понятия не имею, как использовать formArray в моем сценарии.

Answer 1

Попробуйте этот фрагмент

шаблон

<form [formGroup]="testForm">
 <div formArrayName="properties">
  <div *ngFor="let prop of testForm.get('properties').controls; let i = index" >
   <input type="text" class="form-control" [formControlName]="i">
  </div>
 </div>
</form>
<br>
<button (click)="addFormField()">Add Field</button>

Составная часть

import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
export class App {
  name:string;
  testForm: FormGroup;

  ngOnInit() {
    this.testForm = this.fb.group({
      properties: this.fb.array([])
    });
  }

  constructor(private fb: FormBuilder) {  }

  addFormField() {
    <FormArray>this.testForm.get('properties').push(new FormControl());

  }

}

После понимания шагов кода попробуйте добавить это в таблицу.

Answer 2

Чтобы вывести данные в таблицу (Ваш HTML выглядит нормально)

HTML

<form [formGroup]="myform">
  <table>
    <tr *ngFor="let item of items">
      <td>
       <input type="text" [(ngModel)]="item.name" formControlName="item.name"/>
      </td>
   </tr>
</table>
<button (click)="addRow()">ADD Row </button>
</form>

Код TS

С помощью этого кода TS вы сможете добавить новую строку в таблицу, и контроль формы будет применен автоматически.

addRow(){
items.push({'name' : ''});
}