feat(form): change validate on load to true by default (#284)

.changeset/sour-bobcats-peel.md

@@ -0,0 +1,7 @@
+---
+"@astro-reactive/form": major
+"@astro-reactive/demo": patch
+---
+
+1. Change the default of `validateOnLoad` property to true, making server-side rendering validation the default behavior for the `Form` component.
+1. Update the demo `index.astro` page by removing the `validateOnLoad` property/directive on the example which should still result to server-side rendered validation results.

apps/demo/src/pages/index.astro

@@ -103,7 +103,6 @@ const submit: Submit = {
 
 <Layout title={title} theme={theme}>
 	<Form
-		validateOnLoad
 		showValidationHints
 		formGroups={form}
 		theme={theme}

packages/form/components/Form.astro

@@ -56,7 +56,7 @@ const {
 	formGroups = [],
 	theme,
 	showValidationHints = false,
-	validateOnLoad = false,
+	validateOnLoad = true,
 	readOnly = false,
 	action = '',
 	method = 'get',
@@ -72,10 +72,18 @@ const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
 if (validateOnLoad) {
 	if (Array.isArray(formGroups)) {
 		formGroups.forEach((group) =>
-			group.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad))
+			group.controls.forEach((control) => {
+				if ('setValidateOnLoad' in control) {
+					control.setValidateOnLoad(validateOnLoad);
+				}
+			})
 		);
 	} else {
-		formGroups.controls.forEach((control) => control.setValidateOnLoad(validateOnLoad));
+		formGroups.controls.forEach((control) => {
+			if ('setValidateOnLoad' in control) {
+				control.setValidateOnLoad(validateOnLoad);
+			}
+		});
 	}
 }
 ---

packages/form/core/form-control.ts

@@ -50,9 +50,8 @@ export class FormControl {
 	/**
 	 * Tracks the value and validation status of an individual form control.
 	 * @param config - interface of a `FormControl`'s configuration.
-	 * @param validateOnLoad - determines if a control will be validated before rendering on the server. Defaults to `false`
 	 */
-	constructor(private config: ControlConfig, validateOnLoad = false) {
+	constructor(private config: ControlConfig) {
 		const {
 			name,
 			type = 'text',
@@ -83,11 +82,6 @@ export class FormControl {
 			this._rows = rows;
 			this._cols = cols;
 		}
-
-		// TODO: implement independence
-		// form should try to import validator,
-		// but handle error when it's not installed
-		this.setValidateOnLoad(validateOnLoad);
 	}
 
 	get id() {
@@ -178,6 +172,7 @@ export class FormControl {
 					const valueStr: string = this._value?.toString() || '';
 					this._errors = this.validate(valueStr, this._validators);
 				} else {
+					// give a console warning that the validator package needs to be installed
 					// if user did not install the validator, then errors should be empty
 					this._errors = [];
 				}