add getForm() method; closes #1180

docs/resources/changelog.md

@@ -10,6 +10,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 
 - Added TypeScript types to all custom events [#1183](https://github.com/shoelace-style/shoelace/pull/1183)
 - Added the `svg` part to `<sl-icon>`
+- Added the `getForm()` method to all form controls [#1180](https://github.com/shoelace-style/shoelace/issues/1180)
 - Fixed a bug in `<sl-select>` that caused the display label to render incorrectly in Chrome after form validation [#1197](https://github.com/shoelace-style/shoelace/discussions/1197)
 - Fixed a bug in `<sl-input>` that prevented users from applying their own value for `autocapitalize`, `autocomplete`, and `autocorrect` when using `type="password` [#1205](https://github.com/shoelace-style/shoelace/issues/1205)
 - Fixed a bug in `<sl-tab-group>` that prevented scroll controls from showing when dynamically adding tabs [#1208](https://github.com/shoelace-style/shoelace/issues/1208)

src/components/button/button.ts

@@ -257,6 +257,11 @@ export default class SlButton extends ShoelaceElement implements ShoelaceFormCon
     return true;
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     if (this.isButton()) {

src/components/checkbox/checkbox.ts

@@ -158,6 +158,11 @@ export default class SlCheckbox extends ShoelaceElement implements ShoelaceFormC
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();

src/components/color-picker/color-picker.ts

@@ -764,6 +764,11 @@ export default class SlColorPicker extends ShoelaceElement implements ShoelaceFo
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     if (!this.inline && !this.validity.valid) {

src/components/input/input.ts

@@ -377,6 +377,11 @@ export default class SlInput extends ShoelaceElement implements ShoelaceFormCont
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();

src/components/radio-group/radio-group.ts

@@ -252,12 +252,9 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     return true;
   }
 
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  /** Gets the associated form, if one exists. */
-  setCustomValidity(message = '') {
+  getForm(): HTMLFormElement | null {
-    this.customValidityMessage = message;
+    return this.formControlController.getForm();
-    this.errorMessage = message;
-    this.validationInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -279,6 +276,14 @@ export default class SlRadioGroup extends ShoelaceElement implements ShoelaceFor
     return isValid;
   }
 
+  /** Sets a custom validation message. Pass an empty string to restore validity. */
+  setCustomValidity(message = '') {
+    this.customValidityMessage = message;
+    this.errorMessage = message;
+    this.validationInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+
   render() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');

src/components/range/range.ts

@@ -254,6 +254,11 @@ export default class SlRange extends ShoelaceElement implements ShoelaceFormCont
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();

src/components/select/select.ts

@@ -639,6 +639,11 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
     return this.valueInput.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.valueInput.reportValidity();

src/components/switch/switch.ts

@@ -163,6 +163,11 @@ export default class SlSwitch extends ShoelaceElement implements ShoelaceFormCon
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();

src/components/textarea/textarea.ts

@@ -281,6 +281,11 @@ export default class SlTextarea extends ShoelaceElement implements ShoelaceFormC
     return this.input.checkValidity();
   }
 
+  /** Gets the associated form, if one exists. */
+  getForm(): HTMLFormElement | null {
+    return this.formControlController.getForm();
+  }
+
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
     return this.input.reportValidity();

src/internal/shoelace-element.ts

@@ -95,7 +95,7 @@ export default class ShoelaceElement extends LitElement {
 }
 
 export interface ShoelaceFormControl extends ShoelaceElement {
-  // Standard form attributes
+  // Form attributes
   name: string;
   value: unknown;
   disabled?: boolean;
@@ -103,7 +103,7 @@ export interface ShoelaceFormControl extends ShoelaceElement {
   defaultChecked?: boolean;
   form?: string;
 
-  // Standard validation attributes
+  // Constraint validation attributes
   pattern?: string;
   min?: number | Date;
   max?: number | Date;
@@ -112,13 +112,13 @@ export interface ShoelaceFormControl extends ShoelaceElement {
   minlength?: number;
   maxlength?: number;
 
-  // Validation properties
+  // Form validation properties
   readonly validity: ValidityState;
   readonly validationMessage: string;
 
-  // Validation methods
+  // Form validation methods
   checkValidity: () => boolean;
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
+  getForm: () => HTMLFormElement | null;
   reportValidity: () => boolean;
   setCustomValidity: (message: string) => void;
 }