README
vdr-react-form-manager
vdr-react-form-manager is a form manager for React. With vdr-react-form-manager you can:
- Manage forms
- Manage inputs validation
- Manage cross form inputs validation
- add/remove/update inputs
Show it in action
Visit vdr-react-form-manager-sandbox website to see several examples of how to use the library.
Installation
- npm
- npm install -save vdr-react-form-manager
- yarn
- yarn add -save vdr-react-form-manager
Recommandation
- Even if is possible to use vdr-react-form-manager for react js project, we precognize to use it with typescript
How use it
const {
resetForm
handleFormChange
getFormValues
getInputProps
addInputs
updateInputs
removeInputs
validateInputs
updateFormProps
emitLastFieldUpdated
lastFieldUpdated
isFormDisabled
isFormValid
isFormTouched
isFormPristine
formErrors
formCustomsProps
} = useFormManager(IFormInitalState)
IFormInitalState: is an object containing the initial form properties
Operation | usage | return value | description |
---|---|---|---|
resetForm | resetForm() | void | reset the form with the initialValues |
handleFormChange | handleFormChange(onformOnChangeEvent) | void | Pass the formOnChangeEvent to this method |
getFormValues | getFormValues() | { k : v } | return an object with form values k : input name v : input value(s) |
getInputProps | getInputProps(x) | input properties | return the input properties x : input name |
addInputs | addInputs({ k : v }) | void | add new input(s) k : input name v : input properties |
updateInputs | updateInputs({ k : v }) | void | update input(s) k : input name v : input properties to update |
removeInputs | removeInputs(x) | void | remove input(s) x : array of input name |
validateInputs | validateInputs(x) | void | will check the validity of your form and inputs. Each input.errors and formErros will be regenared, x : null = all inputs will be checked x : string[] = only the inputs is the list will be checked |
updateFormProps | updateFormProps(x) | void | update the form properties x : FormProperties |
emitLastFieldUpdated | emitLastFieldUpdated(x) | void | configure if you want to receive the name of the latest input updated x : true -> lastFieldUpdated will be setted x : false -> lastfieldUpdated = null default is true |
lastFieldUpdated | lastFieldUpdated | { inputName: x } or null | x : contains the name of the latest input updated if emitLastFieldUpdated = true return null if emitLastFieldUpdated = false |
isFormDisabled | isFormDisabled | boolean | contains the form disabled status |
isFormValid | isFormValid | boolean | contains the form validity status |
isFormTouched | isFormTouched | boolean | The form has been touched |
isFormPristine | isFormPristine | boolean | The form has not been modified yet |
formErrors | formErros | x | contains the form errors x : empty array if no errors x : string[] array of string if the form has errors |
formCustomsProps | formCustomsProps | { k : v } | return an object with form values k : key v: value |
# IFormInitialState |
const { .... } = useFormManager(IFormInitialState)
You need to pass has parameter an object containing the initials props of your form.
|PropertyName|type|description|optional|
|-|-|-|-|
|formInputs| IStateInputs | Object containing the inputs properties |false|
|formValidators|array[IFormValidator]|Array containing functions which implement IFormValidator in order to validate the form|true|
|formCustomsProps| object{ k : v }|k : custom property name
v : custom property value|true|
|formClassNames|string[]|Array of strings who contains the initial form classes|true|
IStateInputs: {K, V} object
Object containing the inputs properties
k : input name
v : input properties object
input properties
|PropertyName|type|description| optional|
|-|-|-|-|
|name|string| input name name - required and unique|false|
|id|string|input id|true|
|value|any|input value|true|
|label|string|string who contains the input label|true|
|isValid|boolean| the input content is valid|true|
|errors|string[]|contains the input erros.
Empty array if no errors|true|
|disabled|boolean|contains the input disabled status|true|
|classNames|string[]|contains the input classes|true|
|validators|IFormInputValidator[]|Array containing functions which implement IFormInputValidator in order to validate the input|true|
|availableValues|IFormInputAvailableValue[]|Array containing objects which implement IFormInputAvailableValue in order to manage selectbox and multiple checkboxes|true|
|customProps|IKeyAny|object{ k : v }|k : custom property name
v : custom property value|true|
|updateId|string|random string who changes every time that the input value changes.
Ex: You can use this field to implement areequals function for React.memo|true|
|isTouched|boolean|The input has been touched|true|
|isPristine|boolean|The input has not been modified yet|true|
GitHub examples
Contains examples to manage a form using the library https://github.com/valentino-drappa/vdr-react-form-manager-sandbox