Проблема с массивом вложенных реактивных форм (Angular 7)

Question

У меня есть приложение Angular 7, в котором я пытаюсь добавить реактивную форму, которая заполняет группу элементов управления под заголовком нескольких категорий.Со стороны HTML это мне удобно.

Большая часть работает за исключением населения группы «Источники».Я проверил, что itemArray заполняется правильно.Однако после слияния с конечной исходной формой значения для элементов управления в разделе «Источники / элементы управления» не отображаются.Я уверен, что что-то не так с моей логикой или типами при передаче обратно массива, но после попытки решить ее в течение нескольких дней, я не могу определить, где проблема.Код ниже.Может кто-нибудь помочь с тем, что я делаю здесь не так?

import {Component, OnInit} from '@angular/core';
import {environment as env} from '../../environments/environment';
import {OARDataService} from '../oar-data.service';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {FormBuilder, FormGroup, FormControl, FormArray} from '@angular/forms';
import {scSource} from './scSource-model';
import {scSourceCategory} from './scSourceCategory-model';


@Component({
    selector: 'app-sc-client-sources',
    templateUrl: './sc-client-sources.component.html',
    styleUrls: ['./sc-client-sources.component.css']
})
export class ScClientSourcesComponent implements OnInit {

    sourceForm: FormGroup;
    source$: scSource[];
    cat$: scSourceCategory[];

    constructor(private _oardata: OARDataService, private _fb: FormBuilder) {
    }

    ngOnInit() {
        this._oardata.getscCategories().subscribe(data => {
            this.cat$ = data;
            this.createForm(this.cat$);
            console.log(this.sourceForm);
        });
    }

    public createForm(cat$: any) {
        var catArray = [];

        for (var c = 0; c < cat$.length; c++) {
            var selectedCat = this.cat$[c].scSourceCategoryID

            //catArray.push(this.buildCategoryHeader(cat$[c]))
            catArray.push(this._fb.group({
                CategoryID: this.cat$[c].scSourceCategoryID,
                Category: this.cat$[c].scSourceCategoryName,
                Sources: this._fb.array([this.getSourcesForCategory(selectedCat)])
            }));

            this.sourceForm = this._fb.group(catArray);
        }
        return this.sourceForm;
    }

    buildSource(sourceInstance: any): FormGroup {

        return this._fb.group({
            sourceID: [sourceInstance.scClientSourceID],
            sourceName: [sourceInstance.scSourceName]
        });
    }

    getSourcesForCategory(selectedCat: number): FormGroup {

        var itemArray = [];

        this._oardata.getscSources(selectedCat).subscribe(data => {
            this.source$ = data;
            for (var i = 0; i < this.source$.length; i++) {
                itemArray.push(this.buildSource(this.source$[i]));
            }
        });
        console.log(itemArray);
        return this._fb.group(itemArray);
    }
}

Изображения представляют значения, которые я вижу в консоли.ItemArray:

Значения ItemArry, когда они не вставлены в форму

Тогда значения SourceForm:

Значения sourceForm.Обратите внимание на значение NULL в Sources