From 2daf595f093d8d0fb0f9a55b4ba87c37721647fc Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 7 Jan 2022 14:38:04 +0100
Subject: [PATCH] [player] Fix restoring of toggle buttons
- Explicitly set the value of the form control of CompoundChildren,
because they are not yet fully registered in the onInit phase.
- Use ChangeDetectorRef to prevent
ExpressionChangedAfterItHasBeenCheckedError
---
.../toggle-button/toggle-button.component.ts | 1 +
.../element-container/element-container.component.ts | 12 +++++++++---
2 files changed, 10 insertions(+), 3 deletions(-)
diff --git a/projects/common/ui-elements/toggle-button/toggle-button.component.ts b/projects/common/ui-elements/toggle-button/toggle-button.component.ts
index 08b8307e6..2ca71171d 100644
--- a/projects/common/ui-elements/toggle-button/toggle-button.component.ts
+++ b/projects/common/ui-elements/toggle-button/toggle-button.component.ts
@@ -7,6 +7,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
template: `
<div class="mat-form-field">
<mat-button-toggle-group [formControl]="elementFormControl"
+ [value]="elementModel.value"
[style.height.px]="elementModel.height">
<mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
[value]="i"
diff --git a/projects/player/src/app/components/element-container/element-container.component.ts b/projects/player/src/app/components/element-container/element-container.component.ts
index 50de60e53..0485a3cb0 100644
--- a/projects/player/src/app/components/element-container/element-container.component.ts
+++ b/projects/player/src/app/components/element-container/element-container.component.ts
@@ -1,5 +1,5 @@
import {
- Component, OnInit, Input, ComponentFactoryResolver, ViewChild, ViewContainerRef, QueryList
+ Component, OnInit, Input, ComponentFactoryResolver, ViewChild, ViewContainerRef, QueryList, ChangeDetectorRef
} from '@angular/core';
import {
FormBuilder, FormControl, FormGroup, ValidatorFn
@@ -59,7 +59,8 @@ export class ElementContainerComponent implements OnInit {
private veronaPostService: VeronaPostService,
private mediaPlayerService: MediaPlayerService,
private unitStateElementMapperService: UnitStateElementMapperService,
- private markingService: MarkingService) {
+ private markingService: MarkingService,
+ private changeDetectorRef: ChangeDetectorRef) {
}
ngOnInit(): void {
@@ -119,8 +120,8 @@ export class ElementContainerComponent implements OnInit {
elementComponent.parentForm = elementForm;
const compoundChildren = elementComponent.getFormElementModelChildren();
this.subscribeCompoundChildren(elementComponent, compoundChildren);
+ this.registerFormGroup(elementForm);
compoundChildren.forEach((element: InputElement) => {
- this.registerFormGroup(elementForm);
this.formService.registerFormControl({
id: element.id,
formControl: new FormControl(element.value),
@@ -165,7 +166,12 @@ export class ElementContainerComponent implements OnInit {
child.domElement,
this.pageIndex
);
+ const formChild = (child as FormElementComponent);
+ if (formChild) {
+ formChild.setFormValue(child.elementModel.value);
+ }
});
+ this.changeDetectorRef.detectChanges();
});
}
}
--
GitLab