angular - 我需要在 Reactive 表单中显示列表并动态添加行在 HTML 中： <form [formGroup]="myform"> <table> <tr *ngFor="let item of items"> <td> <input type="text" [(ngModel)]="item.name" formControlName="item.name"/> </td&

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>

最初我有一个数据，所以我将它绑定在文本框中。当我单击添加按钮时，我需要添加空文本框行。

在组件.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' : ''});
}