Intro to Reactive Forms in Angular - Make Forms Dynamic

Demo: FormArray with FormControls in the Template


In the last video, we added a FormArray to the component. Now we'll finish wiring everything up in the template. On line 11, we'll add a directive to bind the FormArray of phoneNumbers to the div like so: formArrayName="phoneNumbers"

Then, on the same line we'll iterate through the FormArray, adding: *ngFor="let p of phoneNumbers.controls; let i=index"

Lastly, on line 14, we'll bind the index to the input using the formControlName directive: [formControlName]="i"

Test it out by adding a phone number then check out the console to see that new FormControls are added to the FormArray and identified by their index. Awesome!