diff --git a/projects/player/src/app/components/element/element.component.html b/projects/player/src/app/components/element/element.component.html index 691a428338534457297f60e097fd184bd7c61fba..3970878d161e6ba74274690ecb7d2561e99e1c7b 100644 --- a/projects/player/src/app/components/element/element.component.html +++ b/projects/player/src/app/components/element/element.component.html @@ -1,10 +1,28 @@ -<app-element-overlay - [elementModel]="elementModel" - [parentForm]="elementForm" - [parentArrayIndex]="parentArrayIndex" - [isInputElement]="isInputElement"> -</app-element-overlay> -<app-validation-message *ngIf="isInputElement && elementForm" +<ng-container *ngTemplateOutlet="elementModel.dynamicPositioning ? dynamicElement : staticElement"></ng-container> + +<ng-template #staticElement> + <app-element-overlay + [style.display]="'block'" + [style.overflow]="'auto'" + [style.width.px]="elementModel.width" + [style.height.px]="elementModel.height" + [elementModel]="elementModel" + [parentForm]="elementForm" + [parentArrayIndex]="parentArrayIndex" + [isInputElement]="isInputElement"> + </app-element-overlay> +</ng-template> + +<ng-template #dynamicElement> + <app-element-overlay + [elementModel]="elementModel" + [parentForm]="elementForm" + [parentArrayIndex]="parentArrayIndex" + [isInputElement]="isInputElement"> + </app-element-overlay> +</ng-template> + +<app-validation-message *ngIf="isInputElement" [ngClass]="{'dynamic-validation-messages' : elementModel.dynamicPositioning}" [parentForm]="elementForm" [elementModel]="elementModel"> diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html index c6ccce40175067ad4bfbacf28fec1d4da3ad8934..77b796c1e68956d175ca9a8c4ca0fb37b9def38e 100644 --- a/projects/player/src/app/components/section/section.component.html +++ b/projects/player/src/app/components/section/section.component.html @@ -3,9 +3,6 @@ <ng-template #staticElements> <ng-container *ngFor="let element of section.elements; let i = index"> <app-element - [style.overflow]="'auto'" - [style.width.px]="element.width" - [style.height.px]="element.height" [style.position]="'absolute'" [style.left.px]="element.xPosition" [style.top.px]="element.yPosition" diff --git a/projects/player/src/app/components/validation-message/validation-message.component.html b/projects/player/src/app/components/validation-message/validation-message.component.html index acfd5d66da26d4ada63798bfcc013fc385dd4575..d953e911ad4d8234dd61a91a43c29c278fe8111e 100644 --- a/projects/player/src/app/components/validation-message/validation-message.component.html +++ b/projects/player/src/app/components/validation-message/validation-message.component.html @@ -1,4 +1,4 @@ -<ng-container *ngIf="formElementControl && formElementControl.touched"> +<div *ngIf="formElementControl?.touched" class="mat-typography"> <mat-error *ngIf="formElementControl.errors?.required && elementModel.type !== 'checkbox'" [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" > {{requiredMessage}} @@ -19,4 +19,4 @@ [ngClass]="{'dynamic-validation-message' : elementModel.dynamicPositioning}" > {{patternMessage}} </mat-error> -</ng-container> +</div> diff --git a/projects/player/src/app/components/validation-message/validation-message.component.ts b/projects/player/src/app/components/validation-message/validation-message.component.ts index 7fb39a514f69cb93a9761034994ea6ee6767c7e9..02e7337f164d899a2e5017a5bb6945c753f13004 100644 --- a/projects/player/src/app/components/validation-message/validation-message.component.ts +++ b/projects/player/src/app/components/validation-message/validation-message.component.ts @@ -1,5 +1,5 @@ import { - AfterViewInit, Component, Input, OnInit + Component, Input, OnInit } from '@angular/core'; import { FormControl, FormGroup, ValidatorFn, Validators @@ -17,7 +17,7 @@ import { FormService } from '../../../../../common/form.service'; styleUrls: ['./validation-message.component.css'] }) -export class ValidationMessageComponent implements OnInit, AfterViewInit { +export class ValidationMessageComponent implements OnInit { @Input() elementModel!: UnitUIElement; @Input() parentForm!: FormGroup; formElementControl!: FormControl; @@ -32,6 +32,12 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit { ngOnInit(): void { this.setErrorMessages(); + this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl; + this.formService.setValidators({ + id: this.elementModel.id, + validators: this.validators, + formGroup: this.parentForm + }); } private get validators(): ValidatorFn[] { @@ -71,16 +77,4 @@ export class ValidationMessageComponent implements OnInit, AfterViewInit { this.patternMessage = (this.elementModel as TextFieldElement).patternWarnMessage || this.translateService.instant('validators.wrongPattern'); } - - ngAfterViewInit(): void { - // TODO: Remove timeout - setTimeout(() => { - this.formElementControl = this.parentForm.controls[this.elementModel.id] as FormControl; - this.formService.setValidators({ - id: this.elementModel.id, - validators: this.validators, - formGroup: this.parentForm - }); - }); - } }