core.js:6210 ERROR Error: Cannot find control with path: 'x -> 0 -> y -> 0'

Viewed 39

I am working with reactive forms in angular.

I got this error when adding a new value into formArray

ERROR Error: Cannot find control with path: 'hotels -> 0 -> videoYoutubelinks -> 1'

I tried with these codes. serive file

 this.form = this.fb.group({ 
hotels: this.fb.array([this.createHotel()]),
 })

  private createHotel() {
    return this.fb.group({
      id: [''],
      hotelVideoType : [1, [Validators.required]],
      videoYoutubelinks : this.fb.array([], [Validators.required]),
    });
  }

component.ts

  hotelvideoYoutubeLinks : string[][] = [];
  newVideoInputLink = new FormControl();

// add funtion
addHotelVideoLink(newVideoInputLink :string , index: number){
    if (!Array.isArray(this.hotelvideoYoutubeLinks[index])) {
            this.hotelvideoYoutubeLinks[index] = [];
     }

    this.hotelvideoYoutubeLinks[index].push(newVideoInputLink);
 
    console.log("hotel",(this.dealForm.get('hotels') as FormArray).value);  // here value of  videoYoutubelinks = [] even this.hotelvideoYoutubeLinks.lenght > 0.
    this.newVideoInputLink = new FormControl();

  }

.html

<div formArrayName="hotels" *ngFor="let hotel of hotelsControls; let hotelIndex = index">
   <div [formGroupName]="hotelIndex">
      <div *ngIf="hotelvideoYoutubeLinks[hotelIndex]" class="col-md-12 ">
          <nb-list-item formArrayName="videoYoutubelinks"
                  *ngFor="let video of hotelvideoYoutubeLinks[hotelIndex]; let hotelVedioLinkIndex = index">
               <div [formGroupName]="hotelVedioLinkIndex" class="d-flex flex-wrap">
                      {{hotelVedioLinkIndex + 1}}.  {{ video }}
               </div>
          </nb-list-item>
        </div>
    </div>
 </div>

I could not find the mistake. Please anyone help to find the mistake

0 Answers
Related