如何在嵌套表单数组中选择all并取消全选？

Posted 2021-03-26

我在动态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'除了这个尝试之外，我还尝试了其他几个东西 - 列出太多而且可能是可怕的想法。 :(

当用户点击课程分配复选框时，我正在试图找出如果选择该课程中的所有学生，如果没有选择或只选择了一些学生。如果再次单击课程“分配”复选框，则取消选择所有学生。

感谢任何帮助！先感谢您。

答案

如果要为表单控件设置值，则需要使用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);
    });
}