useInputs with object

When you use an object, the input is VALID by default if there is no validation attached to it.

Import

Import useInputs from aio-inputs package

import{useInputs}from"aio-inputs"

Copied

Create your inputs

For example, you want the name, and gender of a user.
Call useInputs like this.

const[myInputs, form]=useInputs(

{

name:{},

gender:{}

)

Copied

Notice that we extract also the form object from aio-inputs. Because we can't use map like array to render our inputs. We will use form.each() instead, or just destructure our inputs and render them. It is up to you

If you log myInputs, you'll see an object where first keys are name and gender. Those keys have these ready-to-use properties.

Now bind myInputs, to some input element.

With form.each(), MORE DETAILS

returnform.each(ip =><inputkey={ip.key}{ ...ip.props }/>)

Copied

With destructuring

const{name , gender}=myInputs;
return<>
<input{ ...name.props }/>
<input{ ...gender.props }/>
</>

Copied

That is it. The value entered by the user will be stored in corresponding name | gender.value() located in myInputs.

Validity

To know if your form (all your inputs) is valid, use isValid property. Every input has also his own valid property

// all inputs
yourInputs.isTouched
yourInputs.isValid
// Each input
eachInput.touched
eachInput.valid

Copied

You can RESET or also get all VALUES by using the FORM OBJECT.

Object with validation

Let's add validation to one of those two inputs. name will have validation (minLength 3).

const[myInputs, form]=useInputs(

{

name:{

validation:{

min:min(3, "The name must have at least 3 characters") // min validation

gender:{}

)

Copied

Now bind myInputs, to some input element. We will also display the error message if an input is touched and is not valid.

// Inside your component
returnform.each(ip => {
return<divkey={ip.key}>
<input{ ...ip.props }/>
{/* if touched and not valid */}
<span>{ip.errorMessage}</span>
</div>
})

Copied

That is it. The value entered by the user will be stored in correspondingip.valuelocated in myInputs.

Validity

To know if your form (all your inputs) is valid, use isValid property. Every input has also his own valid property

// all inputs
yourInputs.isTouched
yourInputs.isValid
// Each input
eachInput.touched
eachInput.valid

Copied

You can RESET or also get all VALUES by using the FORM OBJECT.

INPUTS PROPERTIES like name, type and many others are available.
Same for VALIDATION PROPERTIES like min, max and many others.

Hit next to find out how to use form object with aio-inputs.

Prev Next