diff --git a/projects/common/canvas-element-component.directive.ts b/projects/common/canvas-element-component.directive.ts
index 5ade5cd54ca6b1502b8103902c1d6e9e3a1a354e..20706039240ccf1dfdbc29cbf9a8b5598ed147bd 100644
--- a/projects/common/canvas-element-component.directive.ts
+++ b/projects/common/canvas-element-component.directive.ts
@@ -1,25 +1,32 @@
import {
- Directive, OnInit
+ Directive, OnInit, ViewChild, ViewContainerRef
} from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
import { UnitUIElement } from './unit';
import { FormService } from './form.service';
@Directive()
export abstract class CanvasElementComponent implements OnInit {
+ @ViewChild('inputElement', { read: ViewContainerRef, static: true }) public inputElement!: ViewContainerRef;
elementModel!: UnitUIElement;
formControl!: FormControl;
style!: Record<string, string>;
+ parentForm!: FormGroup;
- constructor(public formService: FormService) { }
+ constructor(private formService: FormService) { }
ngOnInit(): void {
this.formService.controlAdded.next(this.elementModel.id);
- this.formControl = this.formService.getFormControlPath(this.elementModel.id);
+ this.formControl = this.getFormControl(this.elementModel.id);
+ this.formControl.valueChanges.subscribe(v => this.onModelChange(v));
this.updateStyle();
}
- onModelChange(value: any): void {
+ private getFormControl(id: string){
+ return (this.parentForm) ? this.parentForm.controls[id] as FormControl : new FormControl();
+ }
+
+ private onModelChange(value: any): void {
const element = this.elementModel.id;
this.formService.elementValueChanged.next({ element, value });
}
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 66c9879fdf6d43f6831c9e7d039bdff03d58122f..95220c2df298d6e642a1efd04f54512fa67271cf 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -5,7 +5,6 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
selector: 'app-checkbox',
template: `
<mat-checkbox class="example-margin"
- (ngModelChange)="onModelChange($event)"
[formControl]="formControl"
[ngStyle]="style">
{{$any(elementModel).label}}
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index d4fcfda6386aa6c4fd7197d6d3fc8258ca59619d..f76b15c77a8964862bc823d07c8ed9c67e1f9ca3 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -6,8 +6,7 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
template: `
<mat-form-field appearance="fill" [ngStyle]="style">
<mat-label>{{$any(elementModel).label}}</mat-label>
- <mat-select (ngModelChange)="onModelChange($event)"
- [formControl]="formControl">
+ <mat-select [formControl]="formControl">
<mat-option *ngFor="let option of $any(elementModel).options" [value]="option">
{{option}}
</mat-option>
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 1000e0ede2f19969c735cdd33ff5918f3228f675..043258525f1a0f122aab375beb9697cade540959 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -7,7 +7,6 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
<div [ngStyle]="style">
<label id="radio-group-label">{{$any(elementModel).text}}</label>
<mat-radio-group aria-labelledby="radio-group-label"
- (ngModelChange)="onModelChange($event)"
[formControl]="formControl"
fxLayout="{{elementModel.alignment}}">
<mat-radio-button *ngFor="let option of $any(elementModel).options" [value]="option">
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 2204c44c49efc68667b780473a626ab7afe5401a..f5173e79915f14b4dde7ad5a016a3a6072ed4329 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -5,12 +5,10 @@ import { CanvasElementComponent } from '../canvas-element-component.directive';
selector: 'app-text-field',
template: `
<input *ngIf="$any(elementModel).multiline === false" matInput
- (ngModelChange)="onModelChange($event)"
[formControl]="formControl"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
<textarea *ngIf="$any(elementModel).multiline === true" matInput
- (ngModelChange)="onModelChange($event)"
[formControl]="formControl"
[ngStyle]="style"
placeholder="{{$any(elementModel).placeholder}}">
diff --git a/projects/common/form.service.ts b/projects/common/form.service.ts
index b822928b8c7a1b5c9274e68c86390e29351bb413..5bedaf23e18aa389b1318c43f6994bac472c4f1a 100644
--- a/projects/common/form.service.ts
+++ b/projects/common/form.service.ts
@@ -1,6 +1,5 @@
import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
-import { FormControl, FormGroup } from '@angular/forms';
@Injectable({
providedIn: 'root'
@@ -8,8 +7,6 @@ import { FormControl, FormGroup } from '@angular/forms';
export class FormService {
elementValueChanged = new Subject<any>();
controlAdded = new Subject<string>();
- isPlayer: boolean = false;
- formRef!: FormGroup;
get elementValueChanged$(): Observable<any[]> {
return this.elementValueChanged.asObservable();
@@ -18,8 +15,4 @@ export class FormService {
get controlAdded$(): Observable<string> {
return this.controlAdded.asObservable();
}
-
- getFormControlPath(id: string): FormControl {
- return (this.formRef) ? this.formRef.controls[id] as FormControl : new FormControl();
- }
}
diff --git a/projects/player/src/app/app.component.ts b/projects/player/src/app/app.component.ts
index 045c67608072e4b0c17bd61858db2d76ed5505aa..c3f1014092aa106b1cb784f1b417d28502f9f344 100644
--- a/projects/player/src/app/app.component.ts
+++ b/projects/player/src/app/app.component.ts
@@ -14,7 +14,7 @@ interface StartData {
<form *ngIf="form" [formGroup]="form">
<mat-tab-group mat-align-tabs="start">
<mat-tab *ngFor="let page of unitJSON.pages; let i = index" label="Seite {{i+1}}">
- <app-page [page]="page"></app-page>
+ <app-page [parentForm]="form" [page]="page"></app-page>
</mat-tab>
</mat-tab-group>
<button class="form-item" mat-flat-button color="primary" (click)="submit()" [disabled]="!form.valid">Print
@@ -47,7 +47,6 @@ export class AppComponent {
initForm(): void {
this.form = new FormGroup({});
- this.formService.formRef = this.form;
}
submit(): void {
diff --git a/projects/player/src/app/page.component.ts b/projects/player/src/app/page.component.ts
index 730e8852549579140310bdcab42003d8e71acf87..febe115e0f8cc9132b2af037ab80858c834dda96 100644
--- a/projects/player/src/app/page.component.ts
+++ b/projects/player/src/app/page.component.ts
@@ -1,22 +1,25 @@
import { Component, Input } from '@angular/core';
import { UnitPage } from '../../../common/unit';
+import { FormGroup } from "@angular/forms";
@Component({
selector: 'app-page',
template: `
- <app-section *ngFor="let section of page.sections; let i = index"
- [section]="section"
- [ngStyle]="{
+ <app-section *ngFor="let section of page.sections; let i = index"
+ [parentForm]="parentForm"
+ [section]="section"
+ [ngStyle]="{
position: 'relative',
display: 'inline-block',
'background-color': section.backgroundColor,
'height.px': section.height,
'width.px': section.width }">
- {{section.height}}
- </app-section>
+ {{section.height}}
+ </app-section>
`
})
export class PageComponent {
@Input() page!: UnitPage;
+ @Input() parentForm!: FormGroup;
}
diff --git a/projects/player/src/app/section.component.ts b/projects/player/src/app/section.component.ts
index 388ef202ec5a600b51d6ebba096a3885b0ab57b1..96f6d58650d918a8a9d63ec0fc59300edbb7bc07 100644
--- a/projects/player/src/app/section.component.ts
+++ b/projects/player/src/app/section.component.ts
@@ -3,6 +3,7 @@ import {
} from '@angular/core';
import { UnitPageSection, UnitUIElement } from '../../../common/unit';
import * as ComponentUtils from '../../../common/component-utils';
+import { FormGroup } from "@angular/forms";
@Component({
selector: 'app-section',
@@ -11,6 +12,7 @@ import * as ComponentUtils from '../../../common/component-utils';
`
})
export class SectionComponent implements OnInit {
+ @Input() parentForm!: FormGroup;
@Input() section!: UnitPageSection;
@ViewChild('elementContainer', { read: ViewContainerRef, static: true }) private elementContainer!: ViewContainerRef;
@@ -30,6 +32,7 @@ export class SectionComponent implements OnInit {
const componentFactory = ComponentUtils.getComponentFactory(element.type, this.componentFactoryResolver);
const componentRef = this.elementContainer.createComponent(componentFactory);
componentRef.instance.elementModel = element;
+ componentRef.instance.parentForm = this.parentForm;
componentRef.instance.updateStyle({
position: 'absolute',
top: `${element.yPosition}px`,