Vdr-react-form-manager NPM

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