title: Angular 2+ Deep-nested reactive forms problem
body: <p>I've been struggling with this for the past few days. I've read all related posts and other articles, but I still cannot get it right. </p>
  
  <p>I have the following reactive form:</p>
  
  <pre><code>this.companyForm = this.formBuilder.group({
    ...
    ...
    ...
  });
  this.populateFeautureImages()
  
  private populateFeatureImages() {
     this.Feature_images = this.formBuilder.array([]);
  
     this.comp.Feature_images.forEach((fImg) =&gt; {
  
       const subtitle = this.formBuilder.array([]);
  
       fImg.subtitle.forEach(fImgLang =&gt; {
  
         subtitle.push(this.formBuilder.group({
           lang: [fImgLang.lang],
           text: [fImgLang.text]
         }));
       });
  
       const title = this.formBuilder.array([]);
  
       fImg.title.forEach(fImgLang =&gt; {
  
         title.push(this.formBuilder.group({
           lang: [fImgLang.lang],
           text: [fImgLang.text]
         }));
       });
  
       this.Feature_images.push(this.formBuilder.group({
         image_url: [fImg.image_url],
         subtitle: subtitle,
         title: title
       }));
  });
  
  this.companyForm.addControl('Feature_images', this.Feature_images);
  
  
  get FeatureImages() {
     return this.companyForm.get('Feature_images') as FormArray;
  }
  
  get FeatureImagesTitles() {
     return this.Feature_images.get('Feature_images.title') as FormArray;
  }
  
  get FeatureImagesSubtitles() {
     return this.Feature_images.get('Feature_images.subtitle') as FormArray;
  }
  </code></pre>
  
  <p>The <code>company</code>class is an object which the companyForm is modeled upon.</p>
  
  <p>Now, in the template:</p>
  
  <pre><code>...
  &lt;div formArrayName="Feature_images"&gt;
  
            &lt;div *ngFor="let fImg of FeatureImages.controls; index as i" [formGroupName]="i"&gt;        
  
              &lt;mat-form-field class="w-100"&gt;
                &lt;input
                    matInput
                    placeholder="Image Url"
                    value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                    formControlName="image_url"
                &gt;
              &lt;/mat-form-field&gt; 
  
              &lt;div formArrayName="title"&gt;
                  &lt;div *ngFor="let fiTitle of FeatureImagesTitles.controls; index as j" [formGroupName]="j"&gt;
                      &lt;mat-form-field class="w-100"&gt;
                          &lt;input
                              matInput
                              placeholder="Text"
                              value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                              formControlName="text"
                          &gt;
                      &lt;/mat-form-field&gt;     
                  &lt;/div&gt; 
              &lt;/div&gt;
  
              &lt;div formArrayName="subtitle"&gt;
                &lt;div *ngFor="let fiSubtitle of FeatureImages[i].controls.subtitle.controls; index as j" [formGroupName]="j"&gt;
                  &lt;mat-form-field class="w-100"&gt;
                    &lt;input
                        matInput
                        placeholder="Text"
                        value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                        formControlName="text"
                    &gt;
                  &lt;/mat-form-field&gt;     
                &lt;/div&gt;                          
              &lt;/div&gt;       
            &lt;/div&gt;  
  </code></pre>
  
  <p>No matter what I do, the iteration works fine with the external form array (the <code>Feature_images</code> one), but not with the two internal ones (<code>title</code> and <code>subtitles</code>)</p>
  
  <p>Any help please? </p>