@cosva-lab/form-builder

> React form builder.

 

Install

``bash
npm install --save @cosva-lab/form-builder
`

Usage

`tsx
import React from 'react';
import {
FieldsRender,
FieldsBuilder,
FieldTranslateProvider,
} from '@cosva-lab/form-builder';
import { Grid, Button, ButtonGroup } from '@material-ui/core';

export default function App() {
const [fieldsBuilder] = React.useState(
new FieldsBuilder({
validate: false,
fields: [
{
name: 'name',
label: 'Name',
value: '',
breakpoints: {
sm: 6,
},
validChange: true,
validations: [
{
rule: 'isEmpty',
message: 'This field can not be empty',
},
],
},
{
name: 'birth_date',
label: 'Birth date',
type: 'date',
value: '',
breakpoints: {
sm: 6,
},
validations: [
{
rule: 'isEmpty',
message: 'This field can not be empty',
},
],
},
{
name: 'email',
label: 'Email',
value: '',
breakpoints: {
sm: 6,
},
validations: [
{
rule: 'isEmail',
message: "This field don't is email",
},
],
},
],
}),
);
const {
fields,
changeField,
validate,
restoreLast,
saveData,
restore,
} = fieldsBuilder;

return (
message}>

fullWidth
aria-label="full width outlined button group"
>
color="default"
onClick={async () => {
restore();
}}
>
Reset

color="default"
onClick={async () => {
restoreLast();
}}
>
Restore

color="default"
onClick={async () => {
saveData();
}}
>
Save




{...{
fields,
changeField: changeField(),
validate,
}}
/>


variant="outlined"
color="primary"
onClick={() => {
fieldsBuilder.hasErrors({
setErrors: true,
});
}}
>
Validate

variant="outlined"
color="secondary"
onClick={async () => {
if (!(await fieldsBuilder.hasErrors())) {
console.log(fieldsBuilder.getFieldsObject());
}
}}
>
Get Values



);
}
``

License

MIT © andres112013