export const config = {
firstName: {
required: true,
validators: [
value => ({
valid: value.length > 2,
errorMsg: "Must be at least 3 characters long"
})
]
}
};
import React from "react";
import { useForm } from "form-control-react";
import { config } from "./App.config";
export default const App = () => {
const { getFields,handleChange,valid } = useForm(config);
const { firstName } = getFields();
return (
<>
<form>
<div>
<label htmlFor="firstName">First Name</label>
<input
onChange={handleChange}
type="text"
name="firstName"
{...firstName}
/>
<span>{firstName.errorMsg}</span>
</div>
</form>
<button disabled={!valid}>Submit</button>
</>
);
};
export default App;
{
fieldName: {
disabled?: boolean,
required?: boolean,
value?: string | number | [] | {} | boolean,
valid?: boolean,
validators?: [
(value) => ({
valid: value > 0,
errorMsg: 'Must be higher than 0'
})],
}
}
{
getValues,
getFields,
handleBlur,
handleChange,
reset,
setFields,
valid,
validate,
}