feat(forms): allow overriding of errormessage IDs on custom form controls

This will be used by si-formly to link error messages to the custom controls.

Author: spike-rabbit

projects/element-ng/datepicker/si-date-input.directive.ts

@@ -108,7 +108,9 @@ export class SiDateInputDirective
   readonly readonly = input(false, { transform: booleanAttribute });
 
   /**
-   * Overrides the value of aria-describedby
+   * This ID will be bound to the `aria-describedby` attribute of the date-input.
+   * Use this to reference the element containing the error message(s) for the date-input.
+   * It will be picked by the {@link SiFormItemComponent} if the date-input is used inside a form item.
    *
    * @defaultValue
    * ```

projects/element-ng/datepicker/si-date-range.component.html

@@ -7,7 +7,7 @@
   [siDatepickerConfig]="siDatepickerConfig()"
   [placeholder]="startDatePlaceholder() | translate"
   [attr.aria-label]="startDatePlaceholder() | translate"
-  [errormessageId]="errormessageId"
+  [errormessageId]="errormessageId()"
   [disabled]="disabled()"
   [readonly]="readonly()"
   (ngModelChange)="onInputChanged({ start: $event, end: value()?.end })"
@@ -22,7 +22,7 @@
   [siDatepickerConfig]="siDatepickerConfig()"
   [placeholder]="endDatePlaceholder() | translate"
   [attr.aria-label]="endDatePlaceholder() | translate"
-  [errormessageId]="errormessageId"
+  [errormessageId]="errormessageId()"
   [disabled]="disabled()"
   [readonly]="readonly()"
   (ngModelChange)="onInputChanged({ start: value()?.start, end: $event })"

projects/element-ng/datepicker/si-date-range.component.ts

@@ -208,8 +208,17 @@ export class SiDateRangeComponent
    */
   readonly value = model<DateRange>();
 
-  /** @internal */
-  readonly errormessageId = `${this.id()}-errormessage`;
+  /**
+   * This ID will be bound to the `aria-describedby` attribute of the date-range.
+   * Use this to reference the element containing the error message(s) for the date-range.
+   * It will be picked by the {@link SiFormItemComponent} if the date-range is used inside a form item.
+   *
+   * @defaultValue
+   * ```
+   * `${this.id()}-errormessage`
+   * ```
+   */
+  readonly errormessageId = input(`${this.id()}-errormessage`);
 
   private validator!: ValidatorFn;
   private onChange = (val: any): void => {};

projects/element-ng/datepicker/si-timepicker.component.html

@@ -18,7 +18,7 @@
         type="text"
         inputmode="numeric"
         [attr.aria-label]="config.ariaLabel | translate"
-        [attr.aria-describedby]="errormessageId"
+        [attr.aria-describedby]="errormessageId()"
         [attr.maxlength]="config.maxLength"
         [class.is-invalid]="!unitValidation()[config.name] || this.forceInvalid()"
         [disabled]="disabled()"
@@ -42,7 +42,7 @@
         #inputPart
         class="form-control"
         [attr.aria-label]="meridiansAriaLabel() | translate"
-        [attr.aria-describedby]="errormessageId"
+        [attr.aria-describedby]="errormessageId()"
         [class.readonly]="readonly()"
         [disabled]="disabled()"
         (change)="toggleMeridian()"

projects/element-ng/datepicker/si-timepicker.component.ts

@@ -222,8 +222,17 @@ export class SiTimepickerComponent implements ControlValueAccessor, SiFormItemCo
 
   private readonly inputParts = viewChildren<ElementRef<HTMLElement>>('inputPart');
 
-  /** @internal */
-  readonly errormessageId = `${this.id()}-errormessage`;
+  /**
+   * This ID will be bound to the `aria-describedby` attribute of the timepicker.
+   * Use this to reference the element containing the error message(s) for the timepicker.
+   * It will be picked by the {@link SiFormItemComponent} if the timepicker is used inside a form item.
+   *
+   * @defaultValue
+   * ```
+   * `${this.id()}-errormessage`
+   * ```
+   */
+  readonly errormessageId = input(`${this.id()}-errormessage`);
 
   private onChange: (val: any) => void = () => {};
   private onTouched: () => void = () => {};

projects/element-ng/number-input/si-number-input.component.html

@@ -7,7 +7,7 @@
   [readonly]="readonly()"
   [disabled]="disabled()"
   [attr.aria-label]="ariaLabel() | translate"
-  [attr.aria-describedby]="errormessageId"
+  [attr.aria-describedby]="errormessageId()"
   [attr.placeholder]="placeholder() | translate"
   [attr.min]="min()"
   [attr.max]="max()"

projects/element-ng/number-input/si-number-input.component.ts

@@ -141,8 +141,17 @@ export class SiNumberInputComponent
 
   readonly inputElement = viewChild.required<ElementRef<HTMLInputElement>>('inputElement');
 
-  /** @internal */
-  readonly errormessageId = `${this.id()}-errormessage`;
+  /**
+   * This ID will be bound to the `aria-describedby` attribute of the number-input.
+   * Use this to reference the element containing the error message(s) for the number-input.
+   * It will be picked by the {@link SiFormItemComponent} if the number-input is used inside a form item.
+   *
+   * @defaultValue
+   * ```
+   * `${this.id()}-errormessage`
+   * ```
+   */
+  readonly errormessageId = input(`${this.id()}-errormessage`);
 
   protected canInc = true;
   protected canDec = true;

projects/element-ng/phone-number/si-phone-number-input.component.html

@@ -72,7 +72,7 @@
     type="tel"
     class="ms-4 border-0 p-0 focus-none shadow-none flex-grow-1 phone-number"
     [attr.aria-label]="phoneNumberAriaLabel() | translate"
-    [attr.aria-describedby]="errormessageId"
+    [attr.aria-describedby]="errormessageId()"
     [placeholder]="placeholder"
     [disabled]="disabled()"
     [readonly]="readonly()"

projects/element-ng/phone-number/si-phone-number-input.component.ts

@@ -175,8 +175,17 @@ export class SiPhoneNumberInputComponent
 
   readonly valueChange = output<PhoneDetails>();
 
-  /** @internal */
-  readonly errormessageId = `${this.id()}-errormessage`;
+  /**
+   * This ID will be bound to the `aria-describedby` attribute of the phone-number-input.
+   * Use this to reference the element containing the error message(s) for the phone-number-input.
+   * It will be picked by the {@link SiFormItemComponent} if the phone-number-input is used inside a form item.
+   *
+   * @defaultValue
+   * ```
+   * `${this.id()}-errormessage`
+   * ```
+   */
+  readonly errormessageId = input(`${this.id()}-errormessage`);
 
   protected readonly phoneInput = viewChild.required<ElementRef<HTMLInputElement>>('phoneInput');
   protected selectedCountry?: CountryInfo;

projects/element-ng/pills-input/si-pills-input.component.ts

@@ -55,7 +55,7 @@ import {
     '[attr.tabindex]': 'tabindex()',
     '[attr.aria-activedescendant]': 'activeDescendant()',
     '[attr.aria-labelledby]': 'labelledby()',
-    '[attr.aria-describedby]': 'errormessageId'
+    '[attr.aria-describedby]': 'errormessageId()'
   }
 })
 export class SiPillsInputComponent implements OnInit, ControlValueAccessor, SiFormItemControl {
@@ -109,8 +109,17 @@ export class SiPillsInputComponent implements OnInit, ControlValueAccessor, SiFo
    */
   readonly labelledby = input(`${this.id()}-label`);
 
-  /** @internal */
-  readonly errormessageId = `${this.id()}-errormessage`;
+  /**
+   * This ID will be bound to the `aria-describedby` attribute of the pills-input.
+   * Use this to reference the element containing the error message(s) for the pills-input.
+   * It will be picked by the {@link SiFormItemComponent} if the pills-input is used inside a form item.
+   *
+   * @defaultValue
+   * ```
+   * `${this.id()}-errormessage`
+   * ```
+   */
+  readonly errormessageId = input(`${this.id()}-errormessage`);
 
   protected inputValue = '';
   protected onTouched: () => void = () => {};