CODEWITHSUNDEEP
angulartypescript
enesturan
enesturan

Reputation: 63

Cannot find control with path angular

I am working on the hotel project with Angular. My reservation screen opens as modal. Input is generated automatically according to the number of adults and children. But when I write to input, I get the error Cannot find control with path: 'adultArray' or Cannot find control with path: 'childArray'. How can I fix?

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

Upvotes: 2

Views: 1870

Answers (2)

Laszlo Sarvold
Laszlo Sarvold

Reputation: 973

I got this error, Error: Cannot find control with path: '# -> ', being # a number in the FormArray iterated, due to having inside that element of the FormArray a nested [formGroupName] in the template. It was fixed just by removing the square brackets, e.g.: formGroupName="mySubFormGroupName".

Upvotes: 0

Eliseo
Eliseo

Reputation: 57939

1.- use a *ngIf to avoid initial errors

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

2.- iterate over rezForm.get('childArray').controls, NOT over "value" (*)

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

else you will have problems with focus

(*) in production you need make a getter to return an FormArray

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

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

Updated, but the problem is that you has write

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

must be

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

Another problem I see is (but it's mine preference, your code work) when you write in code

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

See a stackblitz with your code

Upvotes: 3

Related Questions