title: Angular2: Cannot find form control at index 1 at FormArray
body: <p>During runtime I am getting all records from the JSON object and in form-control I am getting the values. However, in form-array I am getting only the first of many records. </p>
  
  <p>The error shown in the console:</p>
  
  <blockquote>
    <p>Cannot find form control at index 1 at FormArray._throwIfControlMissing</p>
  </blockquote>
  
  <p>Image of JSON object and error:</p>
  
  <p><a href="https://i.stack.imgur.com/Y2124.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Y2124.png" alt="enter image description here"></a></p>
  
  <ol>
  <li>Interface</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export interface IService {
      ServiceID: number,
      Name: string,
      Staffs: IStaffView[]
  }
  
  export interface IStaffView {
      StaffServiceID: number,
      StaffID: number,
      Name: string
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="2">
  <li>Component</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit, Input } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { Location } from '@angular/common';
  import { Observable } from 'rxjs/Rx';
  import { FormBuilder, FormGroup, FormControl, FormArray , Validators } from '@angular/forms';
  
  import { RESTService } from '../../Service/REST.service';
  import { IService, IStaffView } from '../../Model/service.model';
  import { DBOperation } from '../../Shared/enum';
  import { Global } from '../../Shared/global';
  
  @Component({
      selector: 'app-service-detail',
      templateUrl: 'app/Components/service-detail/service-detail.component.html'
  })
  
  export class ServiceDetailComponent implements OnInit {
     
      service: IService;
      services: IService[];
      staffview: IStaffView;
      staffsview: IStaffView[];
  
      serviceFrm: FormGroup;
      Staffs: FormArray;
  
      msg: string;
      indLoading: boolean = false;
      btnTitle: string;
      dbops: DBOperation;
  
      constructor(
          private fb: FormBuilder,
          private _restService: RESTService,
          private location: Location,
          private _route: ActivatedRoute
      ) {
          const id = this._route.snapshot.params['id'];
          if (!id || id == 0) {
              this.btnTitle = 'Save';
              this.dbops = DBOperation.create;
          } else {
              this.btnTitle = 'Edit';
              this.dbops = DBOperation.update
          }
      }
  
      ngOnInit(): void {
          //this.Staffs = this.fb.array([
          //    this.initStaff()
          //]);
  
  
          this.serviceFrm = this.fb.group({
              ServiceID: [''],
              Name: ['', Validators.required],
              Staffs: this.fb.array([
                  this.initStaff()
              ])
          });
  
          this.getService();
      }
  
      initStaff() {
          return this.fb.group({
              StaffServiceID: [''],
              StaffID: [''],
              Name: ['']
          });
      }
  
      getService(): void {
          const id = parseInt(this._route.snapshot.params['id']);
          if (id &amp;&amp; id &gt; 0) {
              this.indLoading = true;
              this._restService.getById('/api/serviceapi/', id)
                  .subscribe(resp =&gt; this.serviceFrm.setValue(resp)
                  , error =&gt; this.msg = &lt;any&gt;error);
          }
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <ol start="3">
  <li>HTML Code</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="row form-group"&gt;
                      &lt;div class="col-md-3"&gt;
                          &lt;label for="message-text" class="control-label"&gt;Staffs&lt;/label&gt;
                      &lt;/div&gt;
                      &lt;div formArrayName="Staffs"&gt;
                          &lt;div *ngFor="let staff of serviceFrm.controls.Staffs.controls; let i=index" formGroupName="{{i}}"&gt;
                              &lt;div&gt;
                                  &lt;label&gt;Name&lt;/label&gt;
                                  &lt;input type="text" class="form-control" formControlName="Name"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>