Проверка массива форм 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
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
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

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