Angular 角度2+；表单数组验证无效

在这个Angular 2+代码中，我有一个FormArray，其中包含需要验证的字段。FormArray是一个视频列表，每个视频都有一个描述和一个值。值字段是必需的

问题是我遇到了一个错误，

无法找到路径为“videos->0->”的控件。

。我查看了其他答案，调整了代码，但错误依然存在。有没有办法解决这个问题

@组件({
选择器：“我的应用程序”，
模板：`
{{video.descripp}
需要视频标识符
`
})
导出类应用程序实现OnInit{
构造函数（私有formBuilder:formBuilder）{}
视频：任意[]=[{descrip:'descripp 1'，val:'val 1'}，
{descrip:'descripp 2'，val:'val 2'}]；
videoArray:FormArray=新的FormArray（[]）；
恩戈尼尼特（）{
this.exerciseForm=this.formBuilder.group({
“视频”：this.addVideoArray（）
});
}
addVideoArray（）：FormArray{
this.videos.forEach（（video:any）=>{
this.videoArray.push（this.getVideo（video））；
});
返回此.videoArray；
}
getVideo（视频）：FormGroup{
返回此.formBuilder.group({
descripp:this.formBuilder.control（video.descripp，[Validators.required]），
val:this.formBuilder.control（video.val，[Validators.required]）
});
}
}

您需要更改定义和访问视频阵列的方式

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


}

@组件({
选择器：“我的应用程序”，
模板：`
{{video.controls.descrip.value}
需要视频标识符
`
})
导出类应用程序实现OnInit{
构造函数（私有formBuilder:formBuilder）{}
视频：任意[]=[{descrip:'descripp 1'，val:'val 1'}，
{descrip:'descripp 2'，val:'val 2'}]；
恩戈尼尼特（）{
this.exerciseForm=this.formBuilder.group({
“视频”：this.formBuilder.array（[]）
});
这个.addVideoArray（）；
}
addVideoArray（）{
const videoArray=（this.exerciseForm.controls.videos作为FormArray）；
this.videos.forEach（（video:any）=>{
videoArray.push（this.getVideo（video））；
});
}
getVideo（视频）：FormGroup{
返回此.formBuilder.group({
descripp:[video.descripp，[Validators.required]]，
val:[video.val，[Validators.required]]
});
}
}

您需要更改定义和访问视频阵列的方式

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


}

@组件({
选择器：“我的应用程序”，
模板：`
{{video.controls.descrip.value}
需要视频标识符
`
})
导出类应用程序实现OnInit{
构造函数（私有formBuilder:formBuilder）{}
视频：任意[]=[{descrip:'descripp 1'，val:'val 1'}，
{descrip:'descripp 2'，val:'val 2'}]；
恩戈尼尼特（）{
this.exerciseForm=this.formBuilder.group({
“视频”：this.formBuilder.array（[]）
});
这个.addVideoArray（）；
}
addVideoArray（）{
const videoArray=（this.exerciseForm.controls.videos作为FormArray）；
this.videos.forEach（（video:any）=>{
videoArray.push（this.getVideo（video））；
});
}
getVideo（视频）：FormGroup{
返回此.formBuilder.group({
descripp:[video.descripp，[Validators.required]]，
val:[video.val，[Validators.required]]
});
}
}

更换：

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

致：

更换：

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

致：

---

很抱歉，仍然获取

无法找到路径为“videos->0->”的控件。

，但说明填充正确。此外，还有一个关于formControlName的问题，如

UnluckyAj

所述，请更改该问题并重新测试。我希望我能将两个答案都标记为正确，抱歉。@ps0604没问题，很高兴听到您的问题已得到解决抱歉，仍然得到

无法找到路径为“videos->0->”的控件，但说明已正确填充。另外还有一个关于formControlName的问题，如
UnluckyAj
所述，请更改并重新测试。我希望我能将两个答案都标记为正确，抱歉。@ps0604没问题，很高兴听到您的问题得到解决模板在组件中模板在组件中在每次迭代中它都会找到formgroupname。在每次迭代中它都会找到formgroupname。