Angular Отображение значений FormArray по умолчанию нарушает форму

Question

У меня есть модальное окно редактирования, которое я показываю, чтобы позволить пользователю редактировать значения. У меня есть массив цен, который я хочу отобразить через FormArray.

public ngOnInit () {
    this.itemValidation = this.formBuilder.group({
            picture: [null, Validators.required],
            name: [null, Validators.required],
            prices: this.formBuilder.array(this.selected.prices.map((price: any) => [this.createUnitPrice(price)])),
            sleeps: [null, [Validators.required, Validators.pattern("^[0-9]+$"), Validators.min(1)]],
            bedrooms: [null, [Validators.required, Validators.pattern("^[0-9]+$"), Validators.min(1)]],
            baths: [null, [Validators.required, Validators.pattern("^[0-9]+$"), Validators.min(1)]],
            details: [null, [Validators.required, Validators.maxLength(1000)]]
    })
}

Мои вызовы управления ценами createUnitPrice для инициализации formArray и установки значения по умолчанию для каждой цены следующим образом:

public createUnitPrice(price?: any): FormGroup {
        return this.formBuilder.group({
            dates: [price.startDate, [Validators.required]],
            price: [price.price, [Validators.required, Validators.pattern("[0-9]+(\.[0-9][0-9]?)?")]],
            addPersonPrice: [price.additionalRatePerGuest, [Validators.pattern("[0-9]+(\.[0-9][0-9]?)?")]],
            personNumber: [price.additionalPersonNumber]
    });
}

Я получаю эту консольную ошибку после добавления this.selected.prices.map внутри моей формы инициализация цен в ngOnInit:

core.es5.js?de3d:1020 ERROR Error: Cannot find control with path: 'prices -> 0 -> dates'
    at _throwError (forms.es5.js?3553:1918)
    at setUpControl (forms.es5.js?3553:1826)
    at FormGroupDirective.addControl (forms.es5.js?3553:4808)
    at FormControlName._setUpControl (forms.es5.js?3553:5396)
    at FormControlName.ngOnChanges (forms.es5.js?3553:5314)
    at checkAndUpdateDirectiveInline (core.es5.js?de3d:10845)
    at checkAndUpdateNodeInline (core.es5.js?de3d:12349)
    at checkAndUpdateNode (core.es5.js?de3d:12288)
    at prodCheckAndUpdateNode (core.es5.js?de3d:12982)
    at Object.eval [as updateDirectives] (EditModalComponent.ngfactory.js:1595)

Вот мой HTML:

<div formArrayName="prices">
    <div *ngFor="let pricing of pricesControls; let i = index;" [formGroupName]="i">
            <div class="row">
                <div class="col-md-4 mt-1">
                  <div class="input-group input-group-lg">
                    <div class="input-group-prepend p-2">
                        <span class="input-group-text default-font-size my-auto" id="price-dates">Price
                                    Dates</span>
                    </div>
                    <input type="text" class="form-control default-font-size" [(ngModel)]="pricing.dates"
                                (change)="modified.price = true;" placeholder="Price Dates"
                                formControlName="dates" aria-describedby="dates" aria-required="true">
                 </div>
            </div>
      </div>
</div>

get pricesControls() {
   return this.itemValidation.get('prices')['controls'];
}