-
Notifications
You must be signed in to change notification settings - Fork 0
API
Ashish Uttam edited this page Apr 22, 2021
·
11 revisions
const {
fields: [field1, field2, ...more],
...helpers
} = useForm(
[{ ...fieldOptions1 }, { ...fieldOptions2 }, ...moreOptions],
formOptions,
);
useform([...fieldOptionsList], {...formOptionsObject})
The hook, accepts 2 arguments:
- An
Array
of options to create the fields - An
Object
with form specific options
Property | Type | Default | Description |
---|---|---|---|
name | string | name of the field (required) | |
value | any | '' |
initial value, value type depends on the input element type. For example Boolean for checkbox, Array for multiple select, String for text and similar input elements. Note: The value must be initialized with the correct type when using with the non-text input types |
transform | callback (newValue, prev) => string
|
callback for transforming value when the value gets changed. See more details below. | |
validate | callback ({value, setError, getField}) => boolean|void
|
callback to validate the field onChange and onSubmit events of the <input /> and <form /> elements. Return 'true' to mark field as valid. See more details below. |
const optionsList = [
{
name: "enroll",
value: false
},
{
name: "email",
value: "",
// transform value on change
transform: value => value.toUpperCase(),
// validate value on change
validate: ({ value, setError, getField }) => {
// updated value of the field
console.log(value);
// getting data of another field
const enroll = getField("enroll");
// setting error on the email field
if (enroll.value && !value) {
setError("Email cannot be blank");
return false; // validation failed
}
return true; // validation passed
}
}
];
Property | Type | Default | Description |
---|---|---|---|
submit | callback ({getValue, getFields, getObject}) => void
|
called when form is submitted (via form helper submit() or when handleSubmit is triggered) |
Check this example to know more about using this callback.
const { fields: [], ...helpers } = useForm();
The useForm
hook returns an Object
that contains:
- an
Array
of fields, created in the same order as the field options were passed - additional helpers to work with the form
Following are the properties of the returned object-
Property | Type | Description |
---|---|---|
fields | Array | array of fields in the same order the options are passed to the hook. See more details below. |
setFieldValue | Function(fieldName:String, value:any) | helper method to set any field value |
setFieldError | Function(fieldName:String, error:String) | helper method to set any field error |
reset | Function | method to reset all the fields to their initial values |
submit | Function | method to manually trigger submit callback of the form options argument passed to the hook |
handleSubmit | Function | event handler for <form /> on submit event. See example.
|
isDirty | Function | flag that indicates at least one of the fields is dirty |
isInvalid | Function | flag that indicates at least one of the fields is invalid |
Following are the properties of each field object returned in the fields
array -
Property | Type | Description |
---|---|---|
name | string |
name of the field |
value | any |
value of the field |
initialValue | any |
initial value of the field |
dirty | boolean |
flag to indicate that the value has been changed |
error | string |
field error set by using setError or setFieldError methods |
invalid | boolean |
flag to indicate that field has invalid value |
Method | Params | Returns | Description |
---|---|---|---|
setValue | name: string , value: any
|
void |
method to set a value of a field |
setError | name: string , error: string
|
void |
method to set an error on a field |
validate | void |
method to manually trigger field validation |
Name | Element | Event | Description |
---|---|---|---|
handleChange | <input/> |
change | updates field's value, element |