feature core/input: validation in input components

packages/angular/src/components.ts

@@ -1326,7 +1326,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
 
 @ProxyCmp({
   inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'getValidityState', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-input',
@@ -2003,7 +2003,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 
 @ProxyCmp({
   inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2526,7 +2526,7 @@ export declare interface IxTabs extends Components.IxTabs {
 
 @ProxyCmp({
   inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-textarea',

packages/angular/standalone/src/components.ts

@@ -1427,7 +1427,7 @@ export declare interface IxIconToggleButton extends Components.IxIconToggleButto
 @ProxyCmp({
   defineCustomElementFn: defineIxInput,
   inputs: ['allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showTextAsTooltip', 'suppressSubmitOnEnter', 'textAlignment', 'type', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'getValidityState', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-input',
@@ -2104,7 +2104,7 @@ Can be prevented, in which case only the event is triggered, and the modal remai
 @ProxyCmp({
   defineCustomElementFn: defineIxNumberInput,
   inputs: ['allowEmptyValueChange', 'allowedCharactersPattern', 'disabled', 'helperText', 'infoText', 'invalidText', 'label', 'max', 'min', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'showStepperButtons', 'showTextAsTooltip', 'step', 'suppressSubmitOnEnter', 'textAlignment', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-number-input',
@@ -2627,7 +2627,7 @@ export declare interface IxTabs extends Components.IxTabs {
 @ProxyCmp({
   defineCustomElementFn: defineIxTextarea,
   inputs: ['disabled', 'helperText', 'infoText', 'invalidText', 'label', 'maxLength', 'minLength', 'name', 'placeholder', 'readonly', 'required', 'resizeBehavior', 'showTextAsTooltip', 'textareaCols', 'textareaHeight', 'textareaRows', 'textareaWidth', 'validText', 'value', 'warningText'],
-  methods: ['getNativeInputElement', 'focusInput']
+  methods: ['getNativeInputElement', 'getValidityState', 'focusInput', 'reset']
 })
 @Component({
   selector: 'ix-textarea',

packages/core/src/components.d.ts

@@ -1969,6 +1969,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Specifies whether to show the text as a tooltip.
          */
@@ -2580,6 +2584,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Indicates if the stepper buttons should be shown
          */
@@ -3357,6 +3365,10 @@ export namespace Components {
           * Get the native textarea element.
          */
         "getNativeInputElement": () => Promise<HTMLTextAreaElement>;
+        /**
+          * Returns the validity state of the textarea field.
+         */
+        "getValidityState": () => Promise<ValidityState>;
         "hasValidValue": () => Promise<boolean>;
         /**
           * The helper text for the textarea field.
@@ -3404,6 +3416,10 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Resets the input field validation state by removing the touched state and clearing validation states while preserving the current value.
+         */
+        "reset": () => Promise<void>;
         /**
           * Determines the resize behavior of the textarea field. Resizing can be enabled in one direction, both directions or completely disabled.
           * @default 'both'

packages/core/src/components/checkbox-group/checkbox-group.tsx

@@ -14,7 +14,13 @@ import {
   ValidationResults,
 } from '../utils/input';
 import { IxComponent } from '../utils/internal';
+import { useFieldGroupValidation } from '../utils/field-group-utils';
 import { makeRef } from '../utils/make-ref';
+import {
+  isFormNoValidate,
+  setupFormSubmitListener,
+  updateCheckboxValidationClasses,
+} from '../checkbox/checkbox-validation';
 
 /**
  * @form-ready
@@ -77,36 +83,39 @@ export class CheckboxGroup
   @State() isWarning = false;
 
   private touched = false;
+  private formSubmissionAttempt = false;
+  private cleanFormListener?: () => void;
   private readonly groupRef = makeRef<HTMLElement>();
 
-  get checkboxElements(): HTMLIxCheckboxElement[] {
-    return Array.from(this.hostElement.querySelectorAll('ix-checkbox'));
-  }
-
-  private readonly observer = new MutationObserver(() => {
-    this.checkForRequiredCheckbox();
-  });
+  private readonly validation = useFieldGroupValidation<HTMLIxCheckboxElement>(
+    this.hostElement,
+    {
+      selector: 'ix-checkbox',
+      isChecked: (el) => el.checked,
+      isRequired: (el) => el.required,
+      updateValidationClasses: updateCheckboxValidationClasses,
+      clearValidationState: this.clearValidationState.bind(this),
+    }
+  );
 
-  private checkForRequiredCheckbox() {
-    this.required = this.checkboxElements.some((checkbox) => checkbox.required);
+  get checkboxElements(): HTMLIxCheckboxElement[] {
+    return this.validation.getElements();
   }
 
-  connectedCallback(): void {
-    this.observer.observe(this.hostElement, {
-      childList: true,
-      subtree: true,
-      attributes: true,
-      attributeFilter: ['checked', 'required'],
+  private setupFormListener() {
+    this.cleanFormListener = setupFormSubmitListener(this.hostElement, () => {
+      this.formSubmissionAttempt = true;
+      this.syncValidationClasses();
     });
   }
 
-  componentWillLoad(): void | Promise<void> {
-    this.checkForRequiredCheckbox();
+  connectedCallback(): void {
+    this.setupFormListener();
   }
 
   disconnectedCallback(): void {
-    if (this.observer) {
-      this.observer.disconnect();
+    if (this.cleanFormListener) {
+      this.cleanFormListener();
     }
   }
 
@@ -144,9 +153,132 @@ export class CheckboxGroup
     );
   }
 
+  private hasAnyChecked(): boolean {
+    return this.validation.hasAnyChecked();
+  }
+
+  private clearValidationState() {
+    this.hostElement.classList.remove('ix-invalid--required', 'ix-invalid');
+    if (this.invalidText) {
+      this.invalidText = '';
+    }
+    this.checkboxElements.forEach((el: any) => {
+      el.classList.remove('ix-invalid', 'ix-invalid--required');
+    });
+  }
+
+  private handleRequiredValidationShared(params: {
+    elements: HTMLElement[];
+    hasAnyChecked: boolean;
+    touched: boolean;
+    formSubmissionAttempt: boolean;
+    invalidText: string | undefined;
+    hostElement: HTMLElement;
+    clearValidationState: () => void;
+    updateValidationClasses: (
+      elements: HTMLElement[],
+      isChecked: boolean,
+      touched: boolean,
+      formSubmissionAttempt: boolean
+    ) => void;
+  }) {
+    const {
+      elements,
+      hasAnyChecked,
+      touched,
+      formSubmissionAttempt,
+      invalidText,
+      hostElement,
+      clearValidationState,
+      updateValidationClasses,
+    } = params;
+
+    if (isFormNoValidate(hostElement)) {
+      clearValidationState();
+      return;
+    }
+    const requiredElements = elements.filter(
+      (el) => (el as HTMLIxCheckboxElement).required
+    );
+    const isChecked = hasAnyChecked;
+    const anyTouched = requiredElements.some(
+      (el) =>
+        (
+          el as HTMLIxCheckboxElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).touched ||
+        (
+          el as HTMLIxCheckboxElement & {
+            touched?: boolean;
+            formSubmissionAttempted?: boolean;
+          }
+        ).formSubmissionAttempted
+    );
+    const isRequiredInvalid =
+      !isChecked && (touched || formSubmissionAttempt || anyTouched);
+    hostElement.classList.toggle('ix-invalid--required', isRequiredInvalid);
+    if (isRequiredInvalid) {
+      hostElement.classList.add('ix-invalid');
+      this.invalidText =
+        invalidText && invalidText.trim().length > 0
+          ? invalidText
+          : 'Please select the required field.';
+    } else {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+      if (invalidText === 'Please select the required field.') {
+        this.invalidText = '';
+      }
+    }
+    if (!isFormNoValidate(hostElement)) {
+      updateValidationClasses(
+        elements,
+        isChecked,
+        touched,
+        formSubmissionAttempt
+      );
+    }
+    if (isChecked) {
+      hostElement.classList.remove('ix-invalid', 'ix-invalid--required');
+    }
+  }
+
+  private handleRequiredValidation() {
+    this.handleRequiredValidationShared({
+      elements: this.checkboxElements,
+      hasAnyChecked: this.hasAnyChecked(),
+      touched: this.touched,
+      formSubmissionAttempt: this.formSubmissionAttempt,
+      invalidText: this.invalidText,
+      hostElement: this.hostElement,
+      clearValidationState: this.clearValidationState.bind(this),
+      updateValidationClasses: updateCheckboxValidationClasses,
+    });
+  }
+
+  async syncValidationClasses() {
+    if (isFormNoValidate(this.hostElement)) {
+      this.clearValidationState();
+      return;
+    }
+    if (this.required) {
+      this.handleRequiredValidation();
+    } else {
+      this.clearValidationState();
+    }
+  }
+
   render() {
     return (
-      <Host ref={this.groupRef} onIxBlur={() => (this.touched = true)}>
+      <Host
+        onIxBlur={() => {
+          if (!this.touched) {
+            this.touched = true;
+            this.syncValidationClasses();
+          }
+        }}
+      >
         <ix-field-wrapper
           label={this.label}
           helperText={this.helperText}