[player] Show different validation warnings

* Move setting of validators from `FormElementComponent` to
`ValidationMessageComponent`
* Add validators and warnings to `ValidationMessageComponent`
* Move subscriptions for form controls and their validators from
`PageComponent` to `FormComponent`

projects/common/form-element-component.directive.ts

@@ -2,7 +2,7 @@ import {
   Directive, EventEmitter, OnDestroy, OnInit, Output
 } from '@angular/core';
 import {
-  FormControl, FormGroup, ValidatorFn, Validators
+  FormControl, FormGroup
 } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { pairwise, startWith, takeUntil } from 'rxjs/operators';
@@ -40,22 +40,6 @@ export abstract class FormElementComponent extends ElementComponent implements O
           this.formValueChanged.emit({ id: this.elementModel.id, values: [prevValue, nextValue] });
         }
       });
-    // TODO: find better solution
-    setTimeout((): void => {
-      this.formService.setValidators({
-        id: this.elementModel.id,
-        validators: this.validators,
-        formGroup: this.parentForm
-      });
-    });
-  }
-
-  private get validators(): ValidatorFn[] {
-    const validators: ValidatorFn[] = [];
-    if (this.elementModel.required) {
-      validators.push(Validators.required);
-    }
-    return validators;
   }
 
   private get formControl(): FormControl {

projects/common/form.service.ts

@@ -42,6 +42,6 @@ export class FormService {
   }
 
   setValidators(validations: FormControlValidators): void {
-    this._validationsAdded.next(validations);
+    Promise.resolve().then(() => this._validationsAdded.next(validations));
   }
 }

projects/player/src/app/components/form.component.ts

@@ -5,7 +5,9 @@ import { takeUntil } from 'rxjs/operators';
 import { FormService } from '../../../../common/form.service';
 import { VeronaSubscriptionService } from '../services/verona-subscription.service';
 import { VeronaPostService } from '../services/verona-post.service';
-import { FormGroupPage, ValueChangeElement } from '../../../../common/form';
+import {
+  FormControlElement, FormControlValidators, FormGroupPage, ValueChangeElement
+} from '../../../../common/form';
 import {
   PlayerConfig, UnitState, VopNavigationDeniedNotification
 } from '../models/verona';
@@ -50,6 +52,12 @@ export class FormComponent implements OnDestroy {
     this.formService.groupAdded
       .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((group: FormGroupPage): void => this.addGroup(group));
+    this.formService.controlAdded.pipe(
+      takeUntil(this.ngUnsubscribe)
+    ).subscribe((control: FormControlElement): void => this.addControl(control));
+    this.formService.validationsAdded.pipe(
+      takeUntil(this.ngUnsubscribe)
+    ).subscribe((validations: FormControlValidators): void => this.setValidators(validations));
     this.veronaSubscriptionService.vopNavigationDeniedNotification
       .pipe(takeUntil(this.ngUnsubscribe))
       .subscribe((message: VopNavigationDeniedNotification): void => this.onNavigationDenied(message));
@@ -58,6 +66,15 @@ export class FormComponent implements OnDestroy {
       .subscribe((formValues: { pages: Record<string, string>[] }): void => this.onFormChanges(formValues));
   }
 
+  private addControl = (control: FormControlElement): void => {
+    control.formGroup.addControl(control.id, control.formControl);
+  };
+
+  private setValidators = (validators: FormControlValidators): void => {
+    validators.formGroup.controls[validators.id].setValidators(validators.validators);
+    validators.formGroup.controls[validators.id].updateValueAndValidity();
+  };
+
   private onNavigationDenied(message: VopNavigationDeniedNotification): void {
     // eslint-disable-next-line no-console
     console.log('player: onNavigationDenied', message);

projects/player/src/app/components/page.component.ts

 import {
-  Component, Input, OnDestroy, OnInit
+  Component, Input, OnInit
 } from '@angular/core';
 import { FormGroup } from '@angular/forms';
-import { takeUntil } from 'rxjs/operators';
-import { Subject } from 'rxjs';
 import { UnitPage } from '../../../../common/unit';
 import { FormService } from '../../../../common/form.service';
-import { FormControlElement, FormControlValidators } from '../../../../common/form';
 
 @Component({
   selector: 'app-page',
@@ -25,46 +22,15 @@ import { FormControlElement, FormControlValidators } from '../../../../common/fo
   `
 })
 
-export class PageComponent implements OnInit, OnDestroy {
+export class PageComponent implements OnInit {
   @Input() page!: UnitPage;
   @Input() parentForm!: FormGroup;
   pageForm!: FormGroup;
-  private ngUnsubscribe = new Subject<void>();
 
   constructor(private formService: FormService) {}
 
   ngOnInit(): void {
     this.pageForm = new FormGroup({});
     this.formService.registerFormGroup({ id: this.page.id, formGroup: this.pageForm });
-    this.initSubscriptions();
-  }
-
-  private initSubscriptions(): void {
-    this.formService.controlAdded.pipe(
-      takeUntil(this.ngUnsubscribe)
-    ).subscribe((control: FormControlElement): void => this.addControl(control));
-    this.formService.validationsAdded.pipe(
-      takeUntil(this.ngUnsubscribe)
-    ).subscribe((validations: FormControlValidators): void => this.setValidators(validations));
-  }
-
-  private addControl(control: FormControlElement): void {
-    // we need to check that the control belongs to the page
-    if (this.pageForm === control.formGroup) {
-      this.pageForm.addControl(control.id, control.formControl);
-    }
-  }
-
-  private setValidators(validators: FormControlValidators): void {
-    // we need to check that the control belongs to the page
-    if (this.pageForm === validators.formGroup) {
-      this.pageForm.controls[validators.id].setValidators(validators.validators);
-      this.pageForm.controls[validators.id].updateValueAndValidity();
-    }
-  }
-
-  ngOnDestroy(): void {
-    this.ngUnsubscribe.next();
-    this.ngUnsubscribe.complete();
   }
 }

projects/player/src/app/components/validation-message.component.ts

 import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-import { InputUIElement, UnitUIElement } from '../../../../common/unit';
+import {
+  FormControl, FormGroup, ValidatorFn, Validators
+} from '@angular/forms';
+import {
+  InputUIElement, NumberFieldElement, TextFieldElement, UnitUIElement
+} from '../../../../common/unit';
+import { FormService } from '../../../../common/form.service';
 
 @Component({
   selector: 'app-error-message',
   template: `
-      <mat-error *ngIf="formElementControl && formElementControl.touched && formElementControl.errors">
-          {{requiredMessage}}
-      </mat-error>
+      <ng-container *ngIf="formElementControl && formElementControl.touched">
+          <mat-error *ngIf="formElementControl.errors?.required">
+              {{requiredMessage}}
+          </mat-error>
+          <mat-error *ngIf="formElementControl.errors?.minlength">
+              {{minLengthMessage}}
+          </mat-error>
+          <mat-error *ngIf="formElementControl.errors?.maxlength">
+              {{maxLengthMessage}}
+          </mat-error>
+          <mat-error *ngIf="formElementControl.errors?.min">
+              {{minMessage}}
+          </mat-error>
+          <mat-error *ngIf="formElementControl.errors?.max">
+              {{maxMessage}}
+          </mat-error>
+      </ng-container>
   `
 })
 
@@ -16,12 +35,56 @@ export class ValidationMessageComponent implements OnInit {
   parentForm!: FormGroup;
   formElementControl!: FormControl;
 
+  constructor(private formService: FormService) {}
+
   ngOnInit(): void {
     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[] {
+    const validators: ValidatorFn[] = [];
+    if (this.elementModel.required) {
+      validators.push(Validators.required);
+    }
+    if (this.elementModel.min) {
+      if (this.elementModel.type === 'number_field') {
+        validators.push(Validators.min(<number> this.elementModel.min));
+      } else {
+        validators.push(Validators.minLength(<number> this.elementModel.min));
+      }
+    }
+    if (this.elementModel.max) {
+      if (this.elementModel.type === 'number_field') {
+        validators.push(Validators.max(<number> this.elementModel.max));
+      } else {
+        validators.push(Validators.maxLength(<number> this.elementModel.maxLength));
+      }
+    }
+    return validators;
   }
 
-  // eslint-disable-next-line class-methods-use-this
   get requiredMessage(): string {
-    return (this.elementModel as InputUIElement).validationWarnMessage || 'Wert muss angegeben werden';
+    return (this.elementModel as InputUIElement).requiredWarnMessage || 'Eingabe erforderlich';
+  }
+
+  get minLengthMessage(): string {
+    return (this.elementModel as TextFieldElement).minWarnMessage || 'Eingabe zu kurz';
+  }
+
+  get maxLengthMessage(): string {
+    return (this.elementModel as TextFieldElement).maxWarnMessage || 'Eingabe zu lang';
+  }
+
+  get minMessage(): string {
+    return (this.elementModel as NumberFieldElement).minWarnMessage || 'Wert zu klein';
+  }
+
+  get maxMessage(): string {
+    return (this.elementModel as NumberFieldElement).maxWarnMessage || 'Wert zu groß';
   }
 }