fix(formly): link error messages to custom controls

spike-rabbit · kfenner · commit 1dfb9eed4737 · 2025-08-22T22:12:35.000+02:00
The automatic linking by the `si-form-item` does not work
due to broken dependency injection.
So we must link it ourselves.

In the long run, we should stop using the `si-form-item`
in `si-formly`.
diff --git a/projects/element-ng/formly/fields/date-range/si-formly-date-range.component.html b/projects/element-ng/formly/fields/date-range/si-formly-date-range.component.html
@@ -12,4 +12,5 @@
   [required]="props.required ?? false"
   [readonly]="props.readonly ?? dateRange.readonly()"
   [autoClose]="props.autoClose ?? dateRange.autoClose()"
+  [errormessageId]="id | siValidationErrorId"
 />
diff --git a/projects/element-ng/formly/fields/date-range/si-formly-date-range.component.ts b/projects/element-ng/formly/fields/date-range/si-formly-date-range.component.ts
@@ -7,9 +7,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyModule } from '@ngx-formly/core';
 import { SiDateRangeComponent } from '@siemens/element-ng/datepicker';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-date-range',
-  imports: [ReactiveFormsModule, FormlyModule, SiDateRangeComponent],
+  imports: [ReactiveFormsModule, FormlyModule, SiDateRangeComponent, SiValidationErrorIdPipe],
   templateUrl: './si-formly-date-range.component.html'
 })
 export class SiFormlyDateRangeComponent extends FieldType<FieldTypeConfig> {}
diff --git a/projects/element-ng/formly/fields/datetime/si-formly-datetime.component.html b/projects/element-ng/formly/fields/datetime/si-formly-datetime.component.html
@@ -9,5 +9,6 @@
     [formControl]="formControl"
     [siDatepickerConfig]="props.dateConfig"
     [readonly]="props.readonly || false"
+    [errormessageId]="id | siValidationErrorId"
   />
 </si-calendar-button>
diff --git a/projects/element-ng/formly/fields/datetime/si-formly-datetime.component.ts b/projects/element-ng/formly/fields/datetime/si-formly-datetime.component.ts
@@ -7,9 +7,17 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 import { SiCalendarButtonComponent, SiDatepickerDirective } from '@siemens/element-ng/datepicker';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-datetime',
-  imports: [FormsModule, ReactiveFormsModule, SiCalendarButtonComponent, SiDatepickerDirective],
+  imports: [
+    FormsModule,
+    ReactiveFormsModule,
+    SiCalendarButtonComponent,
+    SiDatepickerDirective,
+    SiValidationErrorIdPipe
+  ],
   templateUrl: './si-formly-datetime.component.html'
 })
 export class SiFormlyDateTimeComponent extends FieldType<FieldTypeConfig> implements OnInit {
diff --git a/projects/element-ng/formly/fields/email/si-formly-email.component.html b/projects/element-ng/formly/fields/email/si-formly-email.component.html
@@ -4,4 +4,5 @@
   [id]="id"
   [formControl]="formControl"
   [formlyAttributes]="field"
+  [attr.aria-describedby]="id | siValidationErrorId"
 />
diff --git a/projects/element-ng/formly/fields/email/si-formly-email.component.ts b/projects/element-ng/formly/fields/email/si-formly-email.component.ts
@@ -6,9 +6,11 @@ import { Component } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyModule } from '@ngx-formly/core';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-email',
-  imports: [FormsModule, ReactiveFormsModule, FormlyModule],
+  imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe],
   templateUrl: './si-formly-email.component.html'
 })
 export class SiFormlyEmailComponent extends FieldType<FieldTypeConfig> {
diff --git a/projects/element-ng/formly/fields/ip-input/si-formly-ip-input.component.html b/projects/element-ng/formly/fields/ip-input/si-formly-ip-input.component.html
@@ -7,6 +7,7 @@
     [formControl]="formControl"
     [formlyAttributes]="field"
     [id]="id"
+    [attr.aria-describedby]="id | siValidationErrorId"
   />
 } @else {
   <input
@@ -17,5 +18,6 @@
     [formControl]="formControl"
     [formlyAttributes]="field"
     [id]="id"
+    [attr.aria-describedby]="id | siValidationErrorId"
   />
 }
diff --git a/projects/element-ng/formly/fields/ip-input/si-formly-ip-input.component.ts b/projects/element-ng/formly/fields/ip-input/si-formly-ip-input.component.ts
@@ -7,9 +7,17 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyModule } from '@ngx-formly/core';
 import { SiIp4InputDirective, SiIp6InputDirective } from '@siemens/element-ng/ip-input';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-ip-address',
-  imports: [ReactiveFormsModule, FormlyModule, SiIp4InputDirective, SiIp6InputDirective],
+  imports: [
+    ReactiveFormsModule,
+    FormlyModule,
+    SiIp4InputDirective,
+    SiIp6InputDirective,
+    SiValidationErrorIdPipe
+  ],
   templateUrl: './si-formly-ip-input.component.html'
 })
 export class SiFormlyIpInputComponent extends FieldType<FieldTypeConfig> {}
diff --git a/projects/element-ng/formly/fields/number/si-formly-number.component.html b/projects/element-ng/formly/fields/number/si-formly-number.component.html
@@ -9,4 +9,5 @@
   [showButtons]="props.showButtons ?? true"
   [step]="props.numberStep ?? 1"
   [unit]="props.unit"
+  [errormessageId]="id | siValidationErrorId"
 />
diff --git a/projects/element-ng/formly/fields/number/si-formly-number.component.ts b/projects/element-ng/formly/fields/number/si-formly-number.component.ts
@@ -7,9 +7,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyModule } from '@ngx-formly/core';
 import { SiNumberInputComponent } from '@siemens/element-ng/number-input';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-number',
-  imports: [ReactiveFormsModule, FormlyModule, SiNumberInputComponent],
+  imports: [ReactiveFormsModule, FormlyModule, SiNumberInputComponent, SiValidationErrorIdPipe],
   templateUrl: './si-formly-number.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/projects/element-ng/formly/fields/password/si-formly-password.component.html b/projects/element-ng/formly/fields/password/si-formly-password.component.html
@@ -13,5 +13,6 @@
       digits: props.digits !== false,
       special: props.special !== false
     }"
+    [attr.aria-describedby]="id | siValidationErrorId"
   />
 </si-password-strength>
diff --git a/projects/element-ng/formly/fields/password/si-formly-password.component.ts b/projects/element-ng/formly/fields/password/si-formly-password.component.ts
@@ -10,14 +10,17 @@ import {
   SiPasswordStrengthDirective
 } from '@siemens/element-ng/password-strength';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-password',
   imports: [
     FormsModule,
     ReactiveFormsModule,
     FormlyModule,
     SiPasswordStrengthComponent,
-    SiPasswordStrengthDirective
+    SiPasswordStrengthDirective,
+    SiValidationErrorIdPipe
   ],
   templateUrl: './si-formly-password.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/projects/element-ng/formly/fields/select/si-formly-select.component.html b/projects/element-ng/formly/fields/select/si-formly-select.component.html
@@ -13,6 +13,7 @@
     [formControl]="formControl"
     [formlyAttributes]="field"
     [readonly]="props.readonly || false"
+    [errormessageId]="id | siValidationErrorId"
   />
 } @else {
   <si-select
@@ -28,5 +29,6 @@
     [formControl]="formControl"
     [formlyAttributes]="field"
     [readonly]="props.readonly || false"
+    [errormessageId]="id | siValidationErrorId"
   />
 }
diff --git a/projects/element-ng/formly/fields/select/si-formly-select.component.ts b/projects/element-ng/formly/fields/select/si-formly-select.component.ts
@@ -12,6 +12,8 @@ import {
   SiSelectSingleValueDirective
 } from '@siemens/element-ng/select';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-select',
   imports: [
@@ -21,7 +23,8 @@ import {
     SiSelectComponent,
     SiSelectSimpleOptionsDirective,
     SiSelectMultiValueDirective,
-    SiSelectSingleValueDirective
+    SiSelectSingleValueDirective,
+    SiValidationErrorIdPipe
   ],
   templateUrl: './si-formly-select.component.html'
 })
diff --git a/projects/element-ng/formly/fields/textarea/si-formly-textarea.component.html b/projects/element-ng/formly/fields/textarea/si-formly-textarea.component.html
@@ -13,6 +13,7 @@
     [formlyAttributes]="field"
     [style.resize]="resizeConfiguration()"
     [style.max-height]="maxHeightConfiguration()"
+    [attr.aria-describedby]="id | siValidationErrorId"
   >
   </textarea>
 </div>
diff --git a/projects/element-ng/formly/fields/textarea/si-formly-textarea.component.ts b/projects/element-ng/formly/fields/textarea/si-formly-textarea.component.ts
@@ -6,9 +6,11 @@ import { AfterViewInit, Component, ElementRef, OnInit, viewChild } from '@angula
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig, FormlyModule } from '@ngx-formly/core';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-textarea',
-  imports: [FormsModule, ReactiveFormsModule, FormlyModule],
+  imports: [FormsModule, ReactiveFormsModule, FormlyModule, SiValidationErrorIdPipe],
   templateUrl: './si-formly-textarea.component.html',
   styleUrl: './si-formly-textarea.component.scss'
 })
diff --git a/projects/element-ng/formly/fields/time/si-formly-time.component.ts b/projects/element-ng/formly/fields/time/si-formly-time.component.ts
@@ -7,9 +7,11 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
 import { SiTimepickerComponent } from '@siemens/element-ng/datepicker';
 
+import { SiValidationErrorIdPipe } from '../../utils';
+
 @Component({
   selector: 'si-formly-time',
-  imports: [SiTimepickerComponent, ReactiveFormsModule],
+  imports: [SiTimepickerComponent, ReactiveFormsModule, SiValidationErrorIdPipe],
   template: `<si-timepicker
     [id]="id"
     [hideLabels]="props.timeConfig?.hideLabels ?? true"
@@ -19,6 +21,7 @@ import { SiTimepickerComponent } from '@siemens/element-ng/datepicker';
     [showMeridian]="props.timeConfig?.showMeridian"
     [formControl]="formControl"
     [readonly]="props.readonly || false"
+    [errormessageId]="id | siValidationErrorId"
   />`
 })
 export class SiFormlyTimeComponent extends FieldType<FieldTypeConfig> implements OnInit {
diff --git a/projects/element-ng/formly/utils.ts b/projects/element-ng/formly/utils.ts
@@ -2,6 +2,8 @@
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+import { Pipe, PipeTransform } from '@angular/core';
+
 /** */
 export const getFieldValue = (model: any, path: string[]): any => {
   for (const p of path) {
@@ -29,3 +31,10 @@ export const getKeyPath = (key?: any): string[] => {
   }
   return path.slice(0);
 };
+
+@Pipe({ name: 'siValidationErrorId' })
+export class SiValidationErrorIdPipe implements PipeTransform {
+  transform(value: string, ...args: any[]): string {
+    return `${value}-formly-validation-error`;
+  }
+}
diff --git a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.html
@@ -10,7 +10,7 @@
       <!-- This string is hard-coded in the bootstrap fields. -->
       <!-- See https://github.com/ngx-formly/ngx-formly/blob/main/src/ui/bootstrap/input/src/input.type.ts -->
       <!-- We should get rid of the bootstrap package, to make it rely on our si-form-item code. -->
-      <formly-validation-message [field]="field" [id]="field.id + '-formly-validation-error'" />
+      <formly-validation-message [field]="field" [id]="id | siValidationErrorId" />
     </div>
   </div>
 </si-form-item>
diff --git a/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts b/projects/element-ng/formly/wrapper/si-formly-wrapper.component.ts
@@ -6,11 +6,17 @@ import { Component } from '@angular/core';
 import { FieldWrapper, FormlyModule } from '@ngx-formly/core';
 import { SiFormItemComponent } from '@siemens/element-ng/form';
 
+import { SiValidationErrorIdPipe } from '../utils';
 import { SiFormlyFormFieldProviderDirective } from './si-formly-form-field-provider.directive';
 
 @Component({
   selector: 'si-formly-wrapper',
-  imports: [SiFormItemComponent, FormlyModule, SiFormlyFormFieldProviderDirective],
+  imports: [
+    SiFormItemComponent,
+    FormlyModule,
+    SiFormlyFormFieldProviderDirective,
+    SiValidationErrorIdPipe
+  ],
   templateUrl: './si-formly-wrapper.component.html'
 })
 export class SiFormlyWrapperComponent extends FieldWrapper {
