В этом коде 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])
});
}
}





Вам необходимо изменить способ определения и доступа к 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 -> ', но описание заполнено правильно.
также существует проблема с formControlName, как упоминалось в UnluckyAj, пожалуйста, измените это и повторите попытку
Я хотел бы отметить оба ответа как правильные, извините.
@ ps0604 Ничего страшного, рад слышать, что ваша проблема решена
Заменять :
<input type = "text" [formControlName] = "val" />
к:
<input type = "text" formControlName = "val" />
на каждой итерации он будет находить formgroupname.
шаблон находится в компоненте