@flatom/forms-react
v0.7.16
Published
Create forms for react
Downloads
19
Readme
@flatom/forms-react
React bindings for Forms of Flatom.
Install
npm i @flatom/forms-react
or
yarn add @flatom/forms-react
@flatom/forms
depends on@flatom/core
,@flatom/react
and@flatom/forms
.
Usage
Step 1: Define you own validators and error messages
import { createSyncValidator } from '@flatom/forms';
const titleValidator = createSyncValidator('title', (prefix: string) => (value: string) => {
if (value.startsWith(prefix)) {
return null
} else {
return {
prefixRequired: { prefix }
}
}
})
const errorMessages: ValidationErrorMessages = {
required: 'Required field',
children: 'Please fill all fields',
min: 'Value have to more then {min}',
max: 'Value have to less then {max}',
prefixRequired: 'Require prefix: {prefix}',
};
Step 2. Define form schema
import { declareFormSchema, validators } from '@flatom/forms';
const formSchema = declareFormSchema({
id: 'my-form',
nullable: true,
controls: {
title: {
defaultValue: '',
validators: [validators.required(), titleValidator('prefix ')],
},
value: {
defaultValue: 0,
validators: [validators.required(),validators.min(1), validators.max(100)],
},
},
});
Step 3: Create field
// todo
Step 4: Create form
const MyForm = ()=> {
const form = useForm(addTransactionFormSchema, formValidators, errorMessages);
return (
<FlatomForm
form={props.form}
onSubmit={onSubmit}
onSubmitInvalid={onSubmitInvalid}
>
</FlatomForm>
)
}