feat(form): add validateOnLoad prop (#213)

* feat(form): add validateOnLoad prop

* feat(form): add FormConfig interface

* refactor(form): refactor FormConfig

* refactor(demo): change params to FormConfig

* chore(demo): remove FormConfig on demo

* feat(form): make validateOnLoad to be false by default

* feat(form): add setValidateOnLoad method

* chore(form): edit comment on validateOnLoad

* feat(form): remove setValidateOnLoad in FormGroup

* revert(form): add FormConfig interface

This reverts commit 44b58d4a43d4d2e8bcd3dc799e3110f9b8f23604.

* revert(demo): change params to FormConfig

This reverts commit 98f8602000505a29d04493617043aa0cfb00a969.

packages/form/components/Form.astro

@@ -9,6 +9,7 @@ export interface Props {
 	formGroups: FormGroup | FormGroup[];
 	readOnly?: boolean;
 	showValidationHints?: boolean;
+	validateOnLoad?: boolean;
 	submitControl?: Submit;
 	theme?: 'light' | 'dark';
 }
@@ -18,6 +19,7 @@ const {
 	formGroups = [],
 	theme,
 	showValidationHints = false,
+	validateOnLoad = false,
 	readOnly = false,
 } = Astro.props;
 
@@ -25,6 +27,22 @@ const uid = new ShortUniqueId({ length: 9 });
 const formTheme = theme ?? 'light';
 const formName = Array.isArray(formGroups) ? null : formGroups?.name || null;
 const formId = Array.isArray(formGroups) ? uid() : formGroups?.id || null;
+
+// if `validateOnLoad` prop is true, 
+// it should forced all FormControl to validate on load
+if (validateOnLoad) {
+	if (Array.isArray(formGroups)) {
+		formGroups.forEach(group =>
+			group.controls.forEach(control => 
+				control.setValidateOnLoad(validateOnLoad)
+			)
+		);
+	} else {
+		formGroups.controls.forEach(control => 
+			control.setValidateOnLoad(validateOnLoad)
+		)
+	}
+}
 ---
 
 <form

packages/form/core/form-control.ts

@@ -39,7 +39,7 @@ export class FormControl {
 		return [];
 	};
 
-	constructor(private config: ControlConfig) {
+	constructor(private config: ControlConfig, validateOnLoad = false) {
 		const {
 			name,
 			type = 'text',
@@ -72,17 +72,7 @@ export class FormControl {
 		// TODO: implement independence
 		// form should try to import validator,
 		// but handle error when it's not installed
-		import('@astro-reactive/validator').then((validator) => {
+		this.setValidateOnLoad(validateOnLoad);
-			if (validator) {
-				this.validate = validator.validate;
-
-				const valueStr: string = this._value?.toString() || '';
-				this._errors = this.validate(valueStr, validators);
-			} else {
-				// if user did not install the validator, then errors should be empty
-				this._errors = [];
-			}
-		});
 	}
 
 	get id() {
@@ -149,6 +139,25 @@ export class FormControl {
 		this._errors = this.validate(valueStr, this._validators || []);
 	}
 
+	setValidateOnLoad(validateOnLoad: boolean) {
+		if (validateOnLoad) {
+			import('@astro-reactive/validator').then((validator) => {
+				if (validator) {
+					this.validate = validator.validate;
+
+					const valueStr: string = this._value?.toString() || '';
+					this._errors = this.validate(valueStr, this._validators);
+				} else {
+					// if user did not install the validator, then errors should be empty
+					this._errors = [];
+				}
+			});
+		} else {
+			// don't do validate for server-render error messages, also set errors to empty
+			this._errors = [];
+		}
+	}
+
 	clearErrors() {
 		this._errors = [];
 	}