Question

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

Course_Student List

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

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

1 个答案: