Fix change detection on validation

alfa-client/libs/design-component/src/lib/form/formcontrol-editor.abstract.component.ts

@@ -33,6 +33,7 @@ export abstract class FormControlEditorAbstractComponent implements ControlValue
   readonly fieldControl: UntypedFormControl = new UntypedFormControl();
   public onChange = (text: string | Date) => undefined;
   public onTouched = () => undefined;
+  public invalidParams: InvalidParam[] = [];
 
   private changesSubscr: Subscription;
   private statusSubscr: Subscription;
@@ -81,12 +82,16 @@ export abstract class FormControlEditorAbstractComponent implements ControlValue
   setErrors(): void {
     if (this.control) {
       this.fieldControl.setErrors(this.control.errors);
-      if (this.control.invalid) this.fieldControl.markAsTouched();
+      if (this.control.invalid) {
+        this._updateInvalidParams();
+        this.fieldControl.markAsTouched();
+      }
     }
   }
 
-  get invalidParams(): InvalidParam[] {
-    return this.fieldControl.errors ?
+  _updateInvalidParams(): void {
+    this.invalidParams =
+      this.fieldControl.errors ?
         Object.keys(this.fieldControl.errors).map((key) => <InvalidParam>this.fieldControl.errors[key])
       : [];
   }

alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.html

@@ -23,6 +23,6 @@ Die sprachspezifischen Genehmigungen und Beschränkungen
 unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-@for (invalidParam of invalidParams; track invalidParam) {
-  <span>{{ message(invalidParam) }}</span>
+@for (validationMessage of validationMessages; track validationMessage) {
+  <span>{{ validationMessage }}</span>
 }

alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.ts

@@ -21,7 +21,7 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
-import { InvalidParam, getMessageForInvalidParam } from '@alfa-client/tech-shared';
+import { getMessageForInvalidParam, InvalidParam } from '@alfa-client/tech-shared';
 import { Component, Input } from '@angular/core';
 
 @Component({
@@ -32,9 +32,10 @@ import { Component, Input } from '@angular/core';
 })
 export class ValidationErrorComponent {
   @Input() label: string;
-  @Input() invalidParams: InvalidParam[];
 
-  public message(invalidParam: InvalidParam): string {
-    return getMessageForInvalidParam(this.label, invalidParam);
+  @Input() set invalidParams(value: InvalidParam[]) {
+    this.validationMessages = value.map((invalidParam: InvalidParam) => getMessageForInvalidParam(this.label, invalidParam));
   }
+
+  public validationMessages: string[] = [];
 }