Merge branch 'fix-validation-change-detection' into 'main'

Fix change detection on validation

See merge request !66

alfa-client/libs/design-component/src/lib/form/checkbox-editor/checkbox-editor.component.spec.ts

@@ -56,7 +56,7 @@ describe('CheckboxEditorComponent', () => {
     describe('hasError', () => {
       it('should return true', () => {
         component.fieldControl.setErrors({ 1: createInvalidParam() });
-
+        component._updateInvalidParams();
         const result: boolean = component.hasError;
 
         expect(result).toBe(true);
@@ -76,6 +76,7 @@ describe('CheckboxEditorComponent', () => {
     describe('error message', () => {
       it('should show', () => {
         component.fieldControl.setErrors({ 1: createInvalidParam() });
+        component._updateInvalidParams();
         fixture.detectChanges();
 
         const element: HTMLElement = getElementFromFixture(fixture, errorMessageId);

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[] = [];
 }