Угловая проблема глубинных вложенных форм 2+

Question

Я боролся с этим последние несколько дней. Я прочитал все связанные посты и другие статьи, но я все еще не могу понять это правильно.

У меня есть следующая реактивная форма:

this.companyForm = this.formBuilder.group({
  ...
  ...
  ...
});
this.populateFeautureImages()

private populateFeatureImages() {
   this.Feature_images = this.formBuilder.array([]);

   this.comp.Feature_images.forEach((fImg) => {

     const subtitle = this.formBuilder.array([]);

     fImg.subtitle.forEach(fImgLang => {

       subtitle.push(this.formBuilder.group({
         lang: [fImgLang.lang],
         text: [fImgLang.text]
       }));
     });

     const title = this.formBuilder.array([]);

     fImg.title.forEach(fImgLang => {

       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;
}

Класс company - это объект, на который моделируется companyForm.

Теперь в шаблоне:

...
<div formArrayName="Feature_images">

          <div *ngFor="let fImg of FeatureImages.controls; index as i" [formGroupName]="i">        

            <mat-form-field class="w-100">
              <input
                  matInput
                  placeholder="Image Url"
                  value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                  formControlName="image_url"
              >
            </mat-form-field> 

            <div formArrayName="title">
                <div *ngFor="let fiTitle of FeatureImagesTitles.controls; index as j" [formGroupName]="j">
                    <mat-form-field class="w-100">
                        <input
                            matInput
                            placeholder="Text"
                            value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                            formControlName="text"
                        >
                    </mat-form-field>     
                </div> 
            </div>

            <div formArrayName="subtitle">
              <div *ngFor="let fiSubtitle of FeatureImages[i].controls.subtitle.controls; index as j" [formGroupName]="j">
                <mat-form-field class="w-100">
                  <input
                      matInput
                      placeholder="Text"
                      value="{{ imagesUrlLocalArray[selectedFeatureImage].title[currentlyUsedAboutUsLanguage].text }}"
                      formControlName="text"
                  >
                </mat-form-field>     
              </div>                          
            </div>       
          </div>  

Независимо от того, что я делаю, итерация прекрасно работает с внешним массивом форм (Feature_images один), но не с двумя внутренними (title и subtitles)

Любая помощь, пожалуйста?