Проверка массива форм angular 2+ не работает

В этом коде Angular 2+ у меня есть FormArray, содержащий поля, которые необходимо проверить. FormArray - это список видео, каждое из которых имеет описание и значение. Поле значения является обязательным.

Проблема в том, что у меня появляется ошибка Cannot find control with path: 'videos -> 0 -> '. Я посмотрел другие ответы, скорректировал код, но ошибка не исчезла. Есть идеи, как решить эту проблему?

@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])
        });
    }


}

шаблон находится в компоненте

ps0604 10.08.2018 16:39
0
1
1 699
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам необходимо изменить способ определения и доступа к 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]]
        });
    }


}

Извините, я все еще получаю Cannot find control with path: 'videos -> 0 -> ', но описание заполнено правильно.

ps0604 10.08.2018 16:30

также существует проблема с formControlName, как упоминалось в UnluckyAj, пожалуйста, измените это и повторите попытку

Reza 10.08.2018 17:09

Я хотел бы отметить оба ответа как правильные, извините.

ps0604 10.08.2018 17:27

@ ps0604 Ничего страшного, рад слышать, что ваша проблема решена

Reza 10.08.2018 17:32
Ответ принят как подходящий

Заменять :

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

к:

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

ДЕМО С ПРОВЕРКОЙ

на каждой итерации он будет находить formgroupname.

Akj 10.08.2018 16:49

Другие вопросы по теме