角度嵌套动态形式 - 无法读取未定义的属性“控件”

Question

我正在尝试建立一个网站，提供上传您自己的课程的功能。课程结构    Name of course    |-Module1      |-Lecture1      |-Lecture2    |-Module2      |-Lecture1      |-Lecture2使用 Angular 我正在尝试创建一个动态表单，它将在课程中添加/删除模块并在模块中进行讲座到目前为止，我已经写了以下内容 -课程上传.component.tsexport class CourseUploadComponent implements OnInit {    courseUploadForm: FormGroup;    constructor(private formBuilder: FormBuilder) { }    ngOnInit() {        this.courseUploadForm = this.formBuilder.group({            coursename: ['', Validators.required],            modules: this.formBuilder.array([                this.initModules()            ])        })    }    initModules() {        return this.formBuilder.group({            modulename: ['', Validators.required],            lectures: this.formBuilder.array([                this.initLecture()            ])        });    }    initLecture() {        return this.formBuilder.group({            lecturename: ['', Validators.required],            description: ['', Validators.required],            lecture: ['', Validators.required]        });    }    addModule() {        const control = <FormArray>this.courseUploadForm.get('modules');        control.push(this.initModules());    }    addLecture() {        const control = <FormArray>this.courseUploadForm.get('lectures');        control.push(this.initLecture());    }    removeModule(i: number) {        const control = <FormArray>this.courseUploadForm.get('modules');        control.removeAt(i);    }     removeLecture(i: number) {        const control = <FormArray>this.courseUploadForm.get('lectures');        control.removeAt(i);    }    getModulesControls(i: number) {        >>>> return [(this.courseUploadForm.controls.modules as FormArray).controls[i]['controls']];    }    getLecturesControls(i: number) {        return [(this.courseUploadForm.controls.lectures as FormArray).controls[i]['controls']];    }}我用 ** > ** 突出显示了引发错误的行一些帮助？

Answer 1

j在这里没有定义它应该是不同的

<ng-container *ngFor="let control of getModulesControls(j)">
    <mat-error *ngIf="!control.name.valid">Name Required</mat-error>
    </ng-container>

我想你打算在i那里使用变量：getModulesControls(i)

此外，HTML 文件的第 5 行将变量module定义为 Object。第 23 行module.get('lectures')看起来您期望变量FormGroup中有 a。module看看Angular 文档中的这个例子。注意 HTML 标记和 TS。您将需要创建几个 getter，例如get cities(): FormArray(:

Answer 2

我认为您必须检查给定的数组是否为空。如果为空，则应返回 null，

    getModulesControls(i: number) {

         if(this.courseUploadForm.controls.modules.length <1){

              return null;

         }

         else{

             return [(this.courseUploadForm.controls.modules as FormArray).controls[i]['controls']];

         }

    }