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

Question

我正在尝试建立一个网站，提供上传您自己的课程的功能。

课程结构

    Name of course

    |-Module1

      |-Lecture1

      |-Lecture2

    |-Module2

      |-Lecture1

      |-Lecture2

使用 Angular 我正在尝试创建一个动态表单，它将在课程中添加/删除模块并在模块中进行讲座

到目前为止，我已经写了以下内容 -

课程上传.component.ts

export 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&nbsp;*ngFor="let&nbsp;control&nbsp;of&nbsp;getModulesControls(j)"> &nbsp;&nbsp;&nbsp;&nbsp;<mat-error&nbsp;*ngIf="!control.name.valid">Name&nbsp;Required</mat-error> &nbsp;&nbsp;&nbsp;&nbsp;</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，&nbsp; &nbsp; getModulesControls(i: number) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;if(this.courseUploadForm.controls.modules.length <1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return null;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;else{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;return [(this.courseUploadForm.controls.modules as FormArray).controls[i]['controls']];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }