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