ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* 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.
This commit is contained in:
Woramat Ngamkham 2022-11-30 15:28:48 +07:00 committed by GitHub
parent a4ea634b5c
commit 975b2e821a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 39 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/form/components/Form.astro
View file

@ -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

33
packages/form/core/form-control.ts
View file

@ -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) => {
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 = [];
}
});
this.setValidateOnLoad(validateOnLoad);
}
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 = [];
}