0.0.8 • Published 3 months ago
vanilla-form-manager v0.0.8
Getting Started
This is an example of how you may give instructions on setting up how to use the packages.
Installation
npm
npm install vanilla-form-manager
yarn
yarn add vanilla-form-manager
Note
The project is support TypeScript, so we recommended to used TypeScript to reduce mistake from typing.
Usage
Create a form instance
Create a simple instance of form
```js
const initialValues = {
fname: "Duc",
age: "",
address: {
city: "",
country: "",
},
scores: [{ math: "" }, { physics: "" }],
hobbies: [""],
};
const myForm = new FormValidation({
formId: "myForm",
initialValues,
validations: {
fname: (value) => (!!value ? "" : "required"),
age: (value) => (!!value ? "" : "required"),
hobbies: (value) => (value.length > 1 ? "" : "at least 2 hobbies"),
"hobbies._item": (value) => (!!value ? "" : "Required"),
},
onSubmit: (values) => {
console.log("form submitted", values);
},
});
```
formId
: is form ID that can be use later to interact with the forminitialValues
: initial values of the formvalidations
: validation of the form, at currently we only support for single-field validate only (multiple fields with other packages will be in feature)onSubmit
: callback on the form be submitted
Debug the form
We currently support for debug mode to easier to track the form change. You can use it by adding debug: true
into form config
```js
const myForm = new FormValidation({
// others config,
debug: true,
});
```
- After set debug to
true
, you can use the toggle button at right bottom of screen to open the debug console
Examples
You can come to
FormValidation Config
- receive T as generic type FormValidation, if T is not defined, T will automatically infer as initialValues type
API | Type | Detail |
---|---|---|
formId | String | form id of the form |
initialValues | Object | default values of the form |
validations | Object of func(value) => string | defined validation of each field |
validateOnChange | Boolean | enable validation on field change |
validateOnBlur | Boolean | enable validation on field blur |
onSubmit | func(values: T) | callback executed on form submitted |
onChange | func(values: T) | callback executed on form change |
onBlur | func(values: T) | callback executed on form blur |
renderError | func(formState: FormState,formEl: HTMLFormElement,formInputs: HTMLInputElement[]) | custom render error |
watch | Object of func(value, error, isTouched) | config watch callback of each field change |
debug | Boolean | enable debug console |
FormValidation instance
API | Type | Detail |
---|---|---|
initialValues | T | initial value get from config |
isFormValid | Boolean | return true if the form has no error |
formState | Object | contain all information of the form (included: values ,touched ,errors ) |
formElement | HTMLFormElement | return form Element |
resetForm | func() | reset form value to initial value |
validateField | func(fieldPath) | manual valid a field |
validateForm | func() | manual validate the form |
renderFormValue | func(value) | force form to render form again with new value |
formValues | Object | return form values |
setFormValue | func(value) | set form value |
removeFormValue | func(fieldPath) | remove a field value |
getFieldValue | func(fieldPath) | get field value |
setFieldValue | func({fieldPath, value}) | set field value |
setFieldTouched | func({fieldPath, touched}) | set field touch |
getFieldTouched | func(fieldPath) | get field touch |
isFieldTouched | (fieldPath) => boolean | return is a field was touched or not |
formErrors | Object | return form errors |
removeFieldError | func(fieldPath) | remove error of a fieldPath |
getFieldError | (fieldPath) => string | return field's error |
setFieldError | func({fieldPath, error}) | manual set a field error |
addArrayItem | func({fieldPath, value}, callback) | executed callback and add a new field into an array |
removeArrayItem | func({field, index}, callback) | remove field at specific index and executed callback func |