在 Angular2 中动态创建输入表单

Posted 2023-03-05

【中文标题】在 Angular2 中动态创建输入表单

【英文标题】：Dynamically creating input forms in Angular2

【发布时间】：2018-04-12 02:52:52

【问题描述】：

我试图提示用户为他们想要的每一位客人填写一份表格（只是姓名、等级和年龄）。我首先问他们想要多少客人。然后在下一页上，我想向用户显示这么多表单。

像这样：

<ion-list *ngFor="let item of numberOfGuests">
    <ion-item>
      <ion-label>Full name</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Age</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Grade</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>
  </ion-list>

以上显然行不通。我只是以此为例。我希望根据用户想要带来的客人数量来创建每个列表或输入形式。

这在 Angular 2 中是否可行？是否可以根据数字在html中动态创建表单？

【参考方案1】：

我会采用反应形式，就像 Ajmal 建议的那样。

因此，当您拥有应该在模板中呈现多少客人的值时，只需将那么多表单组推送到您的表单数组：

constructor(public navCtrl: NavController, private fb: FormBuilder) 
  // build form
  this.myForm = fb.group(
    // declare empty form array
    guests: fb.array([])
  )
  // here we push form groups to formarray
  this.addGuests();


addGuests() 
  let formArr = this.myForm.controls.guests as FormArray;
  // 'amountOfGuests' is the amount of guests you want rendered
  for(let i = 1; i <= this.amountOfGuests; i++) 
    formArr.push(this.fb.group(
      fullName: [''],
      age: [''],
      grade: ['']
    ))
  

然后您只需在模板中迭代表单数组（缩短代码）：

<form [formGroup]="myForm">
  <ng-container formArrayName="guests">
    <ion-list *ngFor="let guest of myForm.controls.guests.controls; let i = index" [formGroupName]="i">
      <ion-item>
        <ion-label>Full name</ion-label>
        <ion-input formControlName="fullName"></ion-input>
      </ion-item>    
    </ion-list>
  </ng-container>
</form>

这是一个DEMO :)