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

列出表格中的数据（你的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' : ''});
}

Answer 2

试试这个代码段

<强>模板

<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());

  }

}

在理解了代码步骤之后，尝试将其添加到表中。

我需要在Reactive窗体中显示列表以及动态添加行

2 个答案: