Как я могу выделить все и отменить выбор всего в массиве вложенных форм?

Question

У меня есть динамические формы массива внутри динамических форм. Массивы: массив форм, где каждый курс имеет форму массива студентов.

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