How to iterate formgroup with array in Angular2 : <p>I'm working on a model driven form and I can't get it to add items to a list being displayed with ngFor. I'm currently getting an error when trying to iterate my list.</p>

<p>Error:</p>

<pre><code>Error: Cannot find control with path: 'locations -&gt; i'
    at new BaseException (exceptions.ts:21)
    at _throwError (shared.ts:80)
    at Object.setUpFormContainer (shared.ts:66)
    at FormGroupDirective.addFormGroup (form_group_directive.ts:74)
    at FormGroupName.AbstractFormGroupDirective.ngOnInit (abstract_form_group_directive.ts:37)
    at DebugAppView._View_PersonFormComponent4.detectChangesInternal (PersonFormComponent.ngfactory.js:3197)
    at DebugAppView.AppView.detectChanges (view.ts:260)
    at DebugAppView.detectChanges (view.ts:378)
    at DebugAppView.AppView.detectContentChildrenChanges (view.ts:279)
    at DebugAppView._View_PersonFormComponent2.detectChangesInternal (PersonFormComponent.ngfactory.js:1995)
Raw  person-form-builder.service.ts
</code></pre>

<p>formBuilderService:</p>

<pre><code>import {Injectable} from "@angular/core";
import {Validators, FormBuilder} from '@angular/forms';

import {Person} from './../components/person/person';

@Injectable()

export class PersonFormBuilderService {

    constructor(private fb: FormBuilder) {
    }

    getForm(person: Person) {
        return this.fb.group({
            _id: [person._id],
            name: this.fb.group({
                first: [person.name.first],
                middle: [person.name.middle],
                last: [person.name.last],
                full: [person.name.full],
            }),
            locations: this.fb.array([
                this.initLocation(),
            ]),
            files: this.fb.array([
                this.initFiles(),
            ]),
            skills: this.fb.array([
                this.initSkills(),
            ]),
        });
    }

    initLocation() {
        return this.fb.group({
            isDefault: [false, Validators.required],
            location: ['', Validators.required],
            roles: ['', Validators.required],
            isContact: [false, Validators.required],
            contactPhone: ['', Validators.required],
            contactPhoneExt: ['', Validators.required],
        });
    }

    initFiles() {
        return this.fb.group({
            originalName: ['', Validators.required],
        });
    }

    initSkills() {
        return this.fb.group({
            name: ['', Validators.required],
            isrequired: [false, Validators.required],
            expireDate: ['', Validators.required],
            canOverride: [false, Validators.required],
        });
    }

    addLocation(control) {
        control.push(this.initLocation());
    }

    removeLocation(i: number, control) {
        control.removeAt(i);
    }
}
</code></pre>

<p>form:</p>

<pre><code>&lt;div formGroup="form"&gt;
  &lt;div formArrayName="locations"&gt;
      &lt;div *ngFor="let location of form.controls.locations.controls; let i=index"&gt;
          &lt;span&gt;Location {{i + 1}}&lt;/span&gt;
          &lt;div formGroupName="i"&gt;
              &lt;label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"&gt;
                  &lt;input type="checkbox" class="mdl-checkbox__input"
                         formControlName="isDefault" [checked]=""&gt;
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>form-component.ts:</p>

<pre><code>import {Component} from '@angular/core';
import {FormGroup, FormArray} from '@angular/forms';

@Component({
    moduleId: module.id,
    selector: 'person-form-component',
    templateUrl: 'person-form.component.html',
    providers: [PersonService, PersonFormBuilderService]
})

export class PersonFormComponent {
  getPerson(personId) {
      this.personService.getPerson(this.personId).subscribe(res =&gt; {
          this.person = res.data;
          this.form = this.personFormBuilderService.getForm(this.person);
      });
  }

  addLocation() {
      let control = &lt;FormArray&gt; this.form.controls['locations'];
      this.personFormBuilderService.addLocation(control);
  }
}
</code></pre>

<p><a href="https://gist.github.com/jpstokes/11551ff5d8c76514005c6c9fd8a554dd">https://gist.github.com/jpstokes/11551ff5d8c76514005c6c9fd8a554dd</a></p>
