Angular2 reactive form containing a list

Question

I am attempting to create a form for a user that will allow one to may phone numbers to be associated with the user. Is this possible with the current implementation of reactive

Answer 1

What you want to use is a FormArray where you can add new Form Controls dynamically:

constructor(private fb: FormBuilder) {  }

// build form
this.userForm = this.fb.group({
  numbers: this.fb.array([
    new FormControl()
  ])
});


// push new form control when user clicks add button
addNumber() {
  const control = this.userForm.controls['numbers'];
  control.push(new FormControl())
}

And then your template:

  
  

      PhoneNumber {{i+1}} 
      
  

Submit

Demo