Dynamically Creating Input Forms In Angular2

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 w

Solution 1:

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 formthis.myForm = fb.group({
    // declare empty form array
    guests: fb.array([])
  })
  // here we push form groups to formarraythis.addGuests();
}

addGuests() {
  let formArr = this.myForm.controls.guests as FormArray;
  // 'amountOfGuests' is the amount of guests you want renderedfor(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-containerformArrayName="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-inputformControlName="fullName"></ion-input></ion-item></ion-list></ng-container></form>

Here's a DEMO :)