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 valuesk : input namev : input value(s) | | getInputProps | getInputProps(x) | input properties | return the input propertiesx : input name | | addInputs | addInputs({ k : v }) | void | add new input(s)k : input namev : input properties | | updateInputs | updateInputs({ k : v }) | void | update input(s)k : input namev : 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 checkedx : string[] = only the inputs is the list will be checked | | updateFormProps | updateFormProps(x) | void | update the form propertiesx : FormProperties | | emitLastFieldUpdated | emitLastFieldUpdated(x) | void | configure if you want to receive the name of the latest input updatedx : true -> lastFieldUpdated will be settedx : false -> lastfieldUpdated = nulldefault is true | | lastFieldUpdated | lastFieldUpdated | { inputName: x } or null | x : contains the name of the latest input updated if emitLastFieldUpdated = truereturn 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 errorsx : empty array if no errorsx : string[] array of string if the form has errors | | formCustomsProps | formCustomsProps | { k : v } | return an object with form valuesk : keyv: 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 namev : 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 namev : 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