ability to map validaty state from native input to a custom form control

Author: nielslyngsoe

packages/uui-base/lib/mixins/FormControlMixin.ts

@@ -5,14 +5,16 @@ import { UUIFormControlEvent } from '../events';
 
 type Constructor<T = {}> = new (...args: any[]) => T;
 
+type NativeFormControlElement = HTMLInputElement; // Eventually use a specific interface or list multiple options like appending these types: ... | HTMLTextAreaElement | HTMLSelectElement
+
 // TODO: make it possible to define FormDataEntryValue type.
 export declare abstract class FormControlMixinInterface extends LitElement {
   formAssociated: boolean;
   get value(): FormDataEntryValue;
   set value(newValue: FormDataEntryValue);
   name: string;
   formResetCallback(): void;
-  checkValidity: () => boolean;
+  checkValidity(): boolean;
   get validationMessage(): string;
   protected _value: FormDataEntryValue;
   protected _internals: any;
@@ -22,6 +24,7 @@ export declare abstract class FormControlMixinInterface extends LitElement {
     getMessageMethod: () => String,
     checkMethod: () => boolean
   ) => void;
+  protected addFormControlElement(element: NativeFormControlElement): void;
   pristine: boolean;
   required: boolean;
   requiredMessage: string;
@@ -147,6 +150,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
     private _internals: any;
     private _form: HTMLFormElement | null = null;
     private _validators: Validator[] = [];
+    private _formCtrlElements: NativeFormControlElement[] = [];
 
     constructor(...args: any[]) {
       super(...args);
@@ -196,7 +200,33 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       });
     }
 
+    /**
+     * @method addFormControlElement
+     * @description Important notice if adding a native form control then ensure that its value and thereby validity is updated when value is changed from the outside.
+     * @param element {NativeFormControlElement} - element to validate and include as part of this form association.
+     */
+    protected addFormControlElement(element: NativeFormControlElement) {
+      this._formCtrlElements.push(element);
+    }
+
     private _runValidators() {
+      this._validityState = {};
+
+      // Loop through inner native form controls to adapt their validityState.
+      this._formCtrlElements.forEach(formCtrlEl => {
+        for (const key in formCtrlEl.validity) {
+          if (key !== 'valid' && (formCtrlEl.validity as any)[key]) {
+            (this as any)._validityState[key] = true;
+            this._internals.setValidity(
+              (this as any)._validityState,
+              formCtrlEl.validationMessage,
+              formCtrlEl
+            );
+          }
+        }
+      });
+
+      // Loop through custom validators, currently its intentional to have them overwritten native validity. but might need to be reconsidered (This current way enables to overwrite with custom messages)
       this._validators.forEach(validator => {
         if (validator.checkMethod()) {
           this._validityState[validator.flagKey] = true;
@@ -205,8 +235,6 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
             validator.getMessage(),
             this.getFormElement()
           );
-        } else {
-          this._validityState[validator.flagKey] = false;
         }
       });
 
@@ -225,13 +253,6 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
     updated(changedProperties: Map<string | number | symbol, unknown>) {
       super.updated(changedProperties);
       this._runValidators();
-      /*
-      if(changedProperties.has('pristine')) {
-        if(changedProperties.get('pristine') === false) {
-          this._internals.reportValidity();
-        }
-      }
-      */
     }
 
     private _onFormSubmit = () => {
@@ -242,7 +263,7 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
       this._removeFormListeners();
       this._form = this._internals.form;
       if (this._form) {
-        // This relies on the form begin a 'uui-form':
+        // This relies on the form begin a child of uui-form:
         if (this._form.hasAttribute('invalid-submit')) {
           this.pristine = false;
         }
@@ -255,6 +276,12 @@ export const FormControlMixin = <T extends Constructor<LitElement>>(
     }
 
     public checkValidity() {
+      for (const key in this._formCtrlElements) {
+        if (this._formCtrlElements[key].checkValidity() === false) {
+          return false;
+        }
+      }
+
       return this._internals?.checkValidity();
     }
 

packages/uui-input/lib/uui-input.element.ts

@@ -1,6 +1,6 @@
 import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins';
 import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, PropertyValueMap } from 'lit';
 import { property, query } from 'lit/decorators.js';
 
 import { UUIInputEvent } from './UUIInputEvent';
@@ -246,6 +246,13 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
     );
   }
 
+  protected firstUpdated(
+    _changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>
+  ): void {
+    super.firstUpdated(_changedProperties);
+    this.addFormControlElement(this._input);
+  }
+
   /**
    * This method enables <label for="..."> to focus the input
    */
@@ -287,6 +294,7 @@ export class UUIInputElement extends FormControlMixin(LitElement) {
         placeholder=${this.placeholder}
         aria-label=${this.label}
         .disabled=${this.disabled}
+        ?required=${this.required}
         ?readonly=${this.readonly}
         @input=${this._onInput}
         @change=${this._onChange} />

packages/uui-input/lib/uui-input.test.ts

@@ -213,4 +213,24 @@ describe('UuiInput in Form', () => {
       });
     });
   });
+
+  describe('native validation', () => {
+    element.setAttribute('type', 'email');
+
+    it('sets element to invalid when value is empty', async () => {
+      expect(element.checkValidity()).to.be.false;
+    });
+
+    it('email element is invalid when it has a none compliant value', async () => {
+      element.value = 'new value';
+      await elementUpdated(element);
+      expect(element.checkValidity()).to.be.false;
+    });
+
+    it('email element is valid when it has a email value', async () => {
+      element.value = '[email protected]';
+      await elementUpdated(element);
+      expect(element.checkValidity()).to.be.true;
+    });
+  });
 });