title: Angular FormGroup populate from JSON response
body: <p>I had to create a form that could handle 3 levels of nested form arrays, defined like so:</p>
  
  <pre><code>export class Task {
    type        : string;
    description : string;
    role        : string;
    resources   : string[];
  }
  
  export class Phase {
    name  : string;
    tasks : Task[];
  }
  
  export class Module {
    name   : string;
    phases : Phase[];
  }
  
  export class Structure {
    modules : Module[];
  }
  </code></pre>
  
  <p>I followed  <a href="https://medium.com/hashtaagco/3-levels-of-nested-form-arrays-including-reactive-validations-we-decided-to-go-inception-mode-on-4fffe667fb2a" rel="nofollow noreferrer">this tutorial</a> and was able to implement it by assigning the value of my FormGroup to my form</p>
  
  <pre><code>
    techniqueStruct : FormGroup;
  
    create() {
  
      this.form.structure = Object.assign({}, this.techniqueStruct.value);
  
      this.http.post&lt;Technique&gt;(`techniques`, this.form).subscribe(
        response =&gt; {
          this.toastr.success('Technique successfully created.', 'Success');
          this.router.navigate(['/']);
        },
        err =&gt; this.handleError(err)
      );
  
    }
  </code></pre>
  
  <p>Now that I want to do a <code>PUT</code> request and edit the <code>Structure</code>, I have to populate all the form fields but I'm having trouble with <code>Structure</code> objects that have multiple <code>Module</code> objects.</p>
  
  <pre><code>this.techniqueStruct.setValue({
    modules: this.form.structure.modules
  })
  </code></pre>
  
  <p>The above call will only populate the at index 0 and will throw the error</p>
  
  <p><code>ERROR Error: "Cannot find form control at index 1"</code></p>
  
  <p>How can I make sure every index is populated?</p>
  
  <p>**EDIT - FormGroup **</p>
  
  <pre><code>  form  : Partial&lt;Technique&gt; = {
      name                  : "",
      description           : "",
      rules                 : [],
      delivery_mode         : [],
      interaction           : [],
      interrelationship     : [],
      motivation            : [],
      participation         : [],
      performance           : [],
      resolution_scope      : [],
      feedback_use          : [],
      target_audience       : [],
      learning_objectives   : [],
      affective_objectives  : [],
      social_objectives     : [],
      structure             : null
    };
  
    ngOnInit() {
  
      this.createHandler();
  
      this.getAttributes();
  
      this.techniqueStruct = this.fb.group({
        'modules': this.fb.array([
          this.initMod()
        ])
      });
  
      this.sub = this.activeRoute.params.subscribe(params =&gt; {
        this.id = params['id'];
        this.populateForm();
      });
  
    }
    initMod() {
      return this.fb.group({
        'name': ['', [Validators.required]],
        'phases': this.fb.array([
          this.initPhase()
        ])
      });
    }
  
    initPhase() {
      return this.fb.group({
        'name': ['', [Validators.required]],
        'tasks': this.fb.array([
          this.initTask()
        ])
      });
    }
  
    initTask() {
      return this.fb.group({
        'type': '',
        'description': '',
        'role': '',
        'resources': []
      })
    }
  
  
    addMod() {
      const control = &lt;FormArray&gt;this.techniqueStruct.controls['modules'];
      control.push(this.initMod());
    }
  
    addPhase(imod) {
      const control = (&lt;FormArray&gt;this.techniqueStruct.controls['modules']).at(imod).get('phases') as FormArray;
      control.push(this.initPhase());
    }
  
    addTask(imod, ipha) {
      const control = ((&lt;FormArray&gt;this.techniqueStruct.controls['modules']).at(imod).get('phases') as FormArray).at(ipha).get('tasks') as FormArray;
      control.push(this.initTask());
    }
  
    deleteMod(index) {
      let control = &lt;FormArray&gt;this.techniqueStruct.controls['modules'];
      control.removeAt(index)
    }
  
    deletePhase(imod, ipha) {
      const control = (&lt;FormArray&gt;this.techniqueStruct.controls['modules']).at(imod).get('phases') as FormArray;
      control.removeAt(ipha);
    }
  
    deleteTask(imod, ipha, itask) {
      const control = ((&lt;FormArray&gt;this.techniqueStruct.controls['modules']).at(imod).get('phases') as FormArray).at(ipha).get('tasks') as FormArray;
      control.removeAt(itask);
    }
  </code></pre>