Form

The form object is immutable. It will never change once created. You can safely use it in useEffect. It gives you access to these properties / method :

onSubmit() prevent the default behaviour of a <form>...</form> HTML element .
getValues() a method to return your inputs values.
reset() a method to reset a form.
each() a method to loop through each input.
showError() a method that touched inputs and show their error.
getErroneousInput() a method that get the current erroneous input.
get() a method that get an input with it's name.

On submit

Help you prevent the default behaviour of a <form>...</form> HTML element

const[myInputs, form]=useInputs(...)
<formonSubmit={form.onSubmit}
...
</form>

Copied

Get your Values

form.getValues() is a practical way to get the values of your inputs at once. The result is an object where the keys match the name of your inputs. If you didn't set name on inputs creation, random ones are used.

const[myInputs, form]=useInputs(...)
// Get your values
console.log(form.getValues())

Copied

Get inputs by name

form.get() let you to get an input by name. It returns an array of input

const[myInputs, form]=useInputs(...)
// Get your input
console.log(form.get("input name"))

Copied

Show error

form.showError() let your show inputs errors step by step on every invalid input.

const[myInputs, form]=useInputs(...)
// Show error
console.log(form.showError())

Copied

Get erroneous input

form.getErroneousInput() let your get the current erroneous input.

const[myInputs, form]=useInputs(...)
// Get erroneous input
console.log(form.getErroneousInput())

Copied

Reset inputs

form.reset() reset the value of your inputs

const[myInputs, form]=useInputs(...)
// Do a reset
form.reset()

Copied

For each input

const[myInputs, form]=useInputs(...)
// For each input
form.each(...)

Copied

Hit next to find out how to CONFIG aio-inputsbehaviour.

Prev Next