在Angular2中动态创建输入表单 [英] Dynamically creating input forms in Angular2

问题描述

我试图提示用户为每个他们想要的客人填写一张表格（只是名字，年级和年龄）。我首先问他们想要多少客人。然后在下一页我想向用户显示许多表单。

像这样：

 < ion-list * ngFor =let item of numberOfGuests> <离子项目> <离子标签>全名< /离子标签> < ion-input type =text>< / ion-input> < /离子项> <离子项目> <离子标签>&年龄LT; /离子标签> < ion-input type =number>< / ion-input> < /离子项> <离子项目> <离子标签>&级LT; /离子标签> < ion-input type =number>< / ion-input> < /离子项> < / ion-list>  

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

在Angular 2中这甚至可能吗？是否有可能基于数字在html中动态创建表单？

我会用反应形式，就像由Ajmal提出。

所以，当你有多少客人应该在模板中呈现的值时，只需将多个formgroups推送到你的表单数组中：

 构造函数（public navCtrl：NavController，private fb：FormBuilder）{
 //构建表单
 this.myForm = fb。 group（{
 //声明空格式数组
 guests：fb.array（[]）
}）
 //在这里，我们将表单组推送到formarray 
 this .addGuests（）; 
} 
 
 addGuests（）{
 let formArr = this.myForm.controls.guests as FormArray; 
 //'amountOfGuests'是您希望呈现
的客人数量（让i = 1; i< = this.amountOfGuests; i ++）{
 formArr.push（this.fb .group（{
 fullName：['']，
 age：['']，
 grade：[''] 
}））
} 
 
 
 
 $ b $ p 
 $ b 
然后，您只需在模板中迭代表单数组（缩写代码）：
 < form [formGroup] =myForm> 
< ng-container formArrayName =guests> 
< ion-list * ngFor =let myForm.controls.guests.controls; let i = index[formGroupName] =i> 
< ion-item> 
< ion-label>全名< / ion-label> 
< ion-input formControlName =fullName>< / ion-input> 
< / ion-item> 
< / ion-list> 
< / ng-container> 
< / form> 
  
以下是  DEMO   :) 
 
I am trying to prompt a user to fill out a form (just name, grade and age) for each number of guest they want. I first ask them how many guests they want. Then on the next page I want to display that many forms to the user. 

Like this:



<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>





The above obviously does not work. I am just using that as an example. I want each list or form of inputs to be created based on how many guests the user wants to bring. 

Is this even possible within Angular 2? Is it possible to dynamically create a form in html based on a numeral?
解决方案
I would go with a reactive form, just like suggested by Ajmal.

So when you have that value of how many guests should be rendered in template, just push that many formgroups to your form array:
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: ['']
    }))
  }
}
Then you just iterate the form array in your template (shortened code):
<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>
Here's a DEMO :) 

                        
这篇关于在Angular2中动态创建输入表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！