Не удается найти элемент управления с путем angular

Question

Я работаю над проектом отеля с Angular. Мой экран бронирования открывается как модальный. Ввод генерируется автоматически в зависимости от количества взрослых и детей. Но когда я записываю данные для ввода, я получаю сообщение об ошибке «Не удается найти элемент управления с путем:« adultArray »» или «Не удается найти элемент управления с путем:« childArray ». Как я могу исправить?

. html

<div class="container mt-4">
    <div class="row">
        <ng-container formArrayName="adultArray">
                <div *ngFor="let adult of rezForm.controls.adultArray?.value; let i = index" class="col-md-6 ">
                    <ng-container [formGroupName]="adult">
                        <div class="form-group input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">Yetişkin</span>
                            </div>
                            <input class="form-control" formControlName="nameSurname" placeholder="Adı Soyadı" type="text" />
                        </div>
                        <div class="form-group input-group">
                            <div class="input-group-prepend ">
                                <span class="input-group-text">Yetişkin</span>
                            </div>
                            <input class="form-control" formControlName="birthday" placeholder="Doğum Tarihi" type="text" />
                        </div>
                    </ng-container>
                </div>
        </ng-container>
    </div>
</div>
<div class="container mt-4">
    <div class="row">
        <ng-container formArrayName="childArray">
            <div *ngFor="let chd of rezForm.controls.childArray?.value; let i = index" class="col-md-6">
                <ng-container [formGroupName]="chd">
                    <div class="form-group input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Çocuk</span>
                        </div>
                        <input class="form-control" formControlName="nameSurname" placeholder="Adı Soyadı" type="text" />
                    </div>
                    <div class="form-group input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text">Çocuk</span>
                        </div>
                        <input class="form-control" formControlName="birthday" placeholder="Doğum Tarihi" type="text" />
                    </div>
                </ng-container>
            </div>
        </ng-container>
    </div>

.ts

 rezForm: FormGroup;
rezervasyon: Rezervasyon;

constructor(
    private hotelservice: HotelService,
    private fb: FormBuilder,
    public dialogRef: MatDialogRef<RezervasyonComponent>
) { }



createRezervasyon() {
    this.rezForm = this.fb.group({
        adultArray: this.fb.array([]),
        childArray: this.fb.array([]),
        price: ["", Validators.required],
        hotelName: ["", Validators.required],
        roomName: ["", Validators.required],
        checkInDate: ["", Validators.required],
        payDate: ["", Validators.required],
        duration: ["", Validators.required]
    });
}

ngOnInit() {

    this.createRezervasyon();

    of(this.hotel).subscribe(
        data => {
            console.log(data);

            var adultCount = data.numberOfAd;
            let adultArray = this.rezForm.controls.adultArray as FormArray;
            let adult: any = {
                "nameSurname": "",
                "birthday": ""
            };

            for (let i = 0; i < adultCount; i++) {
                adultArray.push(this.fb.group(adult));
            }

            var childCount = data.numberOfChd;
            let childArray = this.rezForm.controls.childArray as FormArray;
            let child: any = {
                "nameSurname": "",
                "birthday": ""
            };

            for (let i = 0; i < childCount; i++) {
                childArray.push(this.fb.group(child));
            }

            this.rezForm.patchValue({
                hotelName: data.hotelName,
                price: data.price,
                roomName: data.roomName,
                checkInDate: data.checkInDate,
                payDate: data.payDate,
                duration: data.duration,
            });
        },
        err => {
            console.error("Hata oluştu: ", err);
        }
    );

Answer 1

1.- используйте * ngIf, чтобы избежать начальных ошибок

<form *ngIf="rezForm" [formGroup"]="rezForm>
   ...
</form>

2.- итерируйте по элементам управления rezForm.get ('childArray'). НЕ, а не по "значению" (*)

<div *ngFor="let chd of rezForm.get('childArray').controls; let i = index">

иначе у вас возникнут проблемы с фокусом

(*) на производстве, вам нужно создать геттер для возврата FormArray

get childArray()
{
    return this.rezForm.get('childArray') as FormArray
}

    <div *ngFor="let chd of childArray.controls; let i = index">

Обновлено , но проблема в том, что у вас есть запись

<ng-container [formGroupName]="adult">

должна быть

<ng-container [formGroupName]="i"> //<--use "i", the let i=index
//or
<ng-container [formGroup]="adult"> //<--use "formGroup" the *ngFor="let adult of ..

Другая проблема, которую я вижу, - (но это мое предпочтение, ваш код работает), когда вы пишете в коде

let adultArray = this.rezForm.controls.adultArray as FormArray;
// I prefer
const adultArray = this.rezForm.get("adultArray") as FormArray;

См. стекаблитц с вашим кодом