feat(core/date-input): dime input validation improvements

.changeset/feat-date-input-validation.md

@@ -0,0 +1,20 @@
+---
+'@siemens/ix': minor
+---
+
+Added `clear()` method to reset value and validation state, removing all visual error indicators even after the field has been touched.
+
+Added `reportValidity()` method to programmatically trigger validation and show visual error state immediately.
+
+Added `i18nErrorRequired` prop (`i18n-error-required`) to customize the required-field error message.
+
+Fixed validation behavior for `ix-date-input`:
+
+- Non-required field is now valid when the value is removed (keyboard deletion or programmatic empty string).
+- Required field shows required-missing error only when empty and touched, or after `reportValidity()`.
+- Visual validation errors only appear after first blur; programmatic value changes are validated internally without visual feedback until interaction.
+- `novalidate` forms suppress all visual validation while `reportValidity()` overrides this suppression.
+- Dynamically toggling the `required` attribute immediately reflects correct validation state.
+- Clicking and holding calendar dates does not trigger validation errors on required empty fields; removed momentary red-border flash when selecting a calendar date.
+- Form submission is now prevented when the field is invalid or required but empty; submission proceeds only when the field is valid (form-associated component with ElementInternals validation).
+

packages/angular/src/components.ts

@@ -630,15 +630,15 @@ The event payload contains information about the selected date range.
 
 
 @ProxyCmp({
-  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
-  methods: ['getNativeInputElement', 'focusInput']
+  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'i18nErrorRequired', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
+  methods: ['clear', 'getNativeInputElement', 'focusInput', 'reportValidity']
 })
 @Component({
   selector: 'ix-date-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
+  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'i18nErrorRequired', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
   outputs: ['valueChange', 'validityStateChange', 'ixChange'],
   standalone: false
 })

packages/angular/standalone/src/components.ts

@@ -735,15 +735,15 @@ The event payload contains information about the selected date range.
 
 @ProxyCmp({
   defineCustomElementFn: defineIxDateInput,
-  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
-  methods: ['getNativeInputElement', 'focusInput']
+  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'i18nErrorRequired', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
+  methods: ['clear', 'getNativeInputElement', 'focusInput', 'reportValidity']
 })
 @Component({
   selector: 'ix-date-input',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
+  inputs: ['ariaLabelCalendarButton', 'ariaLabelNextMonthButton', 'ariaLabelPreviousMonthButton', 'disabled', 'enableTopLayer', 'format', 'helperText', 'i18nErrorDateUnparsable', 'i18nErrorRequired', 'infoText', 'invalidText', 'label', 'locale', 'maxDate', 'minDate', 'name', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'showWeekNumbers', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText', 'weekStartIndex'],
   outputs: ['valueChange', 'validityStateChange', 'ixChange'],
 })
 export class IxDateInput {

packages/core/src/components.d.ts

@@ -970,6 +970,11 @@ export namespace Components {
           * @default 'Previous month'
          */
         "ariaLabelPreviousMonthButton"?: string;
+        /**
+          * Clears the input value and resets the touched state.  Unlike clearing the value directly, this method restores the initial, non-invalid state and removes visible validation errors.
+          * @since 5.2.0
+         */
+        "clear": () => Promise<void>;
         /**
           * Disabled attribute.
           * @default false
@@ -1006,6 +1011,12 @@ export namespace Components {
           * @default 'Date is not valid'
          */
         "i18nErrorDateUnparsable": string;
+        /**
+          * I18n string for the error message when the date field is empty.
+          * @since 5.2.0
+          * @default 'Date is required'
+         */
+        "i18nErrorRequired": string;
         /**
           * Info text below the input field.
          */
@@ -1050,6 +1061,12 @@ export namespace Components {
           * @default false
          */
         "readonly": boolean;
+        /**
+          * Trigger validation and show visual error state immediately, independently of user interaction — for example, in AJAX submissions or manual validation.  Not suppressed by `<form novalidate>` — errors surface regardless.
+          * @returns `true` if valid, `false` otherwise.
+          * @since 5.2.0
+         */
+        "reportValidity": () => Promise<boolean>;
         /**
           * Required attribute.
          */
@@ -7576,6 +7593,12 @@ declare namespace LocalJSX {
           * @default 'Date is not valid'
          */
         "i18nErrorDateUnparsable"?: string;
+        /**
+          * I18n string for the error message when the date field is empty.
+          * @since 5.2.0
+          * @default 'Date is required'
+         */
+        "i18nErrorRequired"?: string;
         /**
           * Info text below the input field.
          */
@@ -11725,6 +11748,7 @@ declare namespace LocalJSX {
         "validText": string;
         "showTextAsTooltip": boolean;
         "i18nErrorDateUnparsable": string;
+        "i18nErrorRequired": string;
         "showWeekNumbers": boolean;
         "weekStartIndex": number;
         "ariaLabelPreviousMonthButton": string;