From f6706390a6946d7f23f0637a3ecaa5667933f0f6 Mon Sep 17 00:00:00 2001
From: sebo <sebastian.bergandy@external.mgm-cp.com>
Date: Sat, 22 Feb 2025 12:45:44 +0100
Subject: [PATCH] Fix change detection on validation
---
.../lib/form/formcontrol-editor.abstract.component.ts | 11 ++++++++---
.../validation-error/validation-error.component.html | 4 ++--
.../ui/validation-error/validation-error.component.ts | 9 +++++----
3 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/alfa-client/libs/design-component/src/lib/form/formcontrol-editor.abstract.component.ts b/alfa-client/libs/design-component/src/lib/form/formcontrol-editor.abstract.component.ts
index 1227c464e9..0e77b51c10 100644
--- a/alfa-client/libs/design-component/src/lib/form/formcontrol-editor.abstract.component.ts
+++ b/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])
: [];
}
diff --git a/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.html b/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.html
index 673ecf065e..edc6820dfa 100644
--- a/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.html
+++ b/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>
}
diff --git a/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.ts b/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.ts
index eae4c1e994..3b2b26490f 100644
--- a/alfa-client/libs/ui/src/lib/ui/validation-error/validation-error.component.ts
+++ b/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[] = [];
}
--
GitLab