如何在嵌套表单数组中全选和取消全选？

Question

我在动态 formArrays 中有动态 formArrays：一个 formArray 课程，其中每门课程都有一个 formArray 学生。

ngOnInit() {
        this.assignForm = this.fb.group({
            courses: this.fb.array([])
        });

        this.setCourses();
    }

表单是根据从服务器检索到的数据this.courses 构建的。

setCourses() {
        const control = <FormArray>this.assignForm.controls.courses;
        if (this.courses) {
            this.courses.forEach(course => {
                control.push(
                    this.fb.group({
                        courseAssign: false,
                        courseDueDate: "dueDate",
                        students: this.setStudents(course)
                    })
                );
            });
        }
    }

setStudents(course) {
        const studentArray = new FormArray([]);
        course.students.forEach(student => {
            studentArray.push(
                this.fb.group({
                    studentAssign: false,
                    studentDueDate: "dueDate"
                })
            );
        });
        return studentArray;
    }

这是我的 HTML：

<form [formGroup]="assignForm" (ngSubmit)="onSubmit()">
    <div fxLayout="row" fxLayoutAlign="end center" class="assign-btn-container">
        <button
            mat-raised-button
            color="primary"
            type="submit">
            Assign
        </button>
    </div>

    <div formArrayName="courses">
        <mat-expansion-panel
            #expPanel
            *ngFor="let course of courses; let i = index"
            [formGroupName]="i">
            <mat-expansion-panel-header>
                <div class="panel-header-text">
                    <div class="course-name">
                            {{ course.courseTitle }}
                    </div>

                    <div class="course-opts">
                        <!-- Course Assign -->
                        <div fxFlex>
                            <mat-checkbox
                                formControlName="courseAssign"
                                (click)="$event.stopPropagation()"
                                (change)="$event ? toggleAssignCourse($event, course, i) : null">
                                Assign
                            </mat-checkbox>
                        </div>

                        <!-- Course Due Date/Time -->
                        <div fxFlex>
                            <input type="text"
                                placeholder="Due Date & Time"
                                formControlName="courseDueDate"/>
                        </div>
                    </div>
                </div>
            </mat-expansion-panel-header>

            <div formArrayName="students">
                <div
                    *ngFor="let student of course.students; let s = index"
                    [formGroupName]="s">
                    <div class="student-name">
                        {{ student.firstName }} {{ student.lastName }}
                    </div>

                    <mat-action-row class="assignment-opts">
                        <!-- Student Assign -->
                        <div fxFlex>
                            <mat-checkbox
                                formControlName="studentAssign"
                                (change)="toggleAssignStudent($event, course, student, s)">
                                Assign
                            </mat-checkbox>
                        </div>

                        <!-- Student Due Date/Time -->
                        <div fxFlex>
                            <input type="text"
                                placeholder="Due Date & Time"
                                formControlName="studentDueDate"/>
                        </div>
                    </mat-action-row>
                </div>
            </div>
        </mat-expansion-panel>
    </div>
</form>

在 HTML 中，课程分配复选框会触发 toggleAssignCourse。 在我的课堂上，我尝试过：

toggleAssignCourse(event, course: Course, i) {
        this.assignForm.value.courses[i].students.map(student => {
            student.studentAssign = true;
        });
    }

这会产生以下错误：Cannot assign to read only property 'studentAssign' 除了这次尝试之外，我还尝试了其他几件事——太多而无法列出，而且可能是可怕的想法。 :(

当用户点击课程分配复选框时，我试图弄清楚如果没有选择或仅选择部分学生，如何选择该课程中的所有学生。如果再次点击课程分配复选框，则取消选择所有学生。

感谢您对此提供任何帮助！提前谢谢你。

Answer 1

当您想为表单控件设置值时，您需要使用setValue。

现在您还可以访问value（如assignForm.value）。那不再是一个表单组，而只是一个 POJO。所以你如何实际设置表单控件的值有点复杂：

toggleAssignCourse(event, course: Course, i) {
  ((<FormArray>this.assignForm.get('courses')).at(i).get('students') as FormArray).controls
    .map(student => {
      student.get('studentAssign').setValue(true);
    });
}