Angular 2+ Form Array validation not working

Question

In this Angular 2+ code I have a FormArray that contains fields that need to be validated. The FormArray is a list of videos, and each video has a description and a value. The value field is required.

Problem is that I'm getting an error Cannot find control with path: 'videos -> 0 -> '. I looked at other answers, adjusted the code, but the error persists. Any ideas how to fix this problem?

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="exerciseForm">
    <div formArrayName="videos">
        <div *ngFor="let video of videoArray.controls; let i=index"  [formGroupName]="i">
            <label>{{video.descrip}}</label> 
            <input type="text" [formControlName]="val" />
            <label *ngIf="exerciseForm.controls['videos'].controls[i].hasError('required') && 
                   (exerciseForm.controls['videos'].controls[i].touched">
                     Video identifier is required
            </label>
        </div>
    </div>
</form>
  `
})
export class App implements OnInit{

    constructor(private formBuilder: FormBuilder){}

    videos:any[] = [ {descrip: 'Descrip 1', val: 'Val 1' },
                     {descrip: 'Descrip 2', val: 'Val 2' } ];
    videoArray: FormArray = new FormArray([]);


    ngOnInit(){
          this.exerciseForm = this.formBuilder.group({
              'videos': this.addVideoArray()
          });
      }


    addVideoArray(): FormArray {
        this.videos.forEach((video: any) => {
            this.videoArray.push(this.getVideo(video));
        });
       return this.videoArray;
     }


     getVideo(video): FormGroup{
        return this.formBuilder.group({
            descrip: this.formBuilder.control(video.descrip, [Validators.required]),
            val: this.formBuilder.control(video.val, [Validators.required])
        });
    }


}

Answer 1

You need to change how did you define and access videoArray

@Component({
  selector: 'my-app',
  template: `
  <form [formGroup]="exerciseForm">
    <div formArrayName="videos">
        <div *ngFor="let video of exerciseForm.controls.videos.controls; let i=index">
          <div [formGroupName]="i">
            <label>{{video.controls.descrip.value}}</label> 
            <input type="text" formControlName="val" />
            <label *ngIf="video.controls.val.hasError('required') && video.controls.val.touched">
                     Video identifier is required
            </label>
          </div>
        </div>
    </div>
</form>
  `
})
export class App implements OnInit{

    constructor(private formBuilder: FormBuilder){}

    videos:any[] = [ {descrip: 'Descrip 1', val: 'Val 1' },
                     {descrip: 'Descrip 2', val: 'Val 2' } ];

    ngOnInit(){
          this.exerciseForm = this.formBuilder.group({
              'videos': this.formBuilder.array([])
          });

          this.addVideoArray();
      }


    addVideoArray() {
        const videoArray = (this.exerciseForm.controls.videos as FormArray);
        this.videos.forEach((video: any) => {
            videoArray.push(this.getVideo(video));
        });
     }


     getVideo(video): FormGroup{
        return this.formBuilder.group({
            descrip: [video.descrip, [Validators.required]],
            val: [video.val, [Validators.required]]
        });
    }


}

Answer 2

Replace :

        <input type="text" [formControlName]="val" />

to:

        <input type="text" formControlName="val" />

DEMO WITH VALIDATION