Final Form Generator MUI is an implementation of @capcar/final-form-generator with Material UI v4.
You need some dependencies in order to use this package:
Here a small example
The main component of the package.
- fields - $ReadOnlyArray<FieldType> (required) : Fields of the forms
- onSubmit - (values: Object) => any (required) : Submit callback of the form
- initialValues - Object : Initial values of the form
- columns - number : columns number of the form grid
- rows - number : rows number of the form grid
- renderSubmit - (params: RenderSubmitParamsType) => React$Element : custom render for submit button
- preValidate - (values: Object) => {[string]: string} : Function than can be called before yup validation
- devMode - boolean: true to display erros and values of the form
- children - React$Element: Children of the form
- customValidationSchema - Object: Yup base schema is you want to use noSortEdges for example.
const customValidationSchema = Yup.object().shape({
customer: Yup.object().shape({}, ['phone', 'email']),
});Here, if you put validation on field customer.email or customer.phone it will be add to this shape.
- preValidate - (values: Object) => Object: Function than can be called before yup validation. It has the form values as param and should return an object with error message (
{[string]: string})
This hook is used to extends MuiForm in association with FormComponent.
- customDefaultValidation - (name: string) => ?Object (required): Function used to extend or override the validation
- fields - $ReadOnlyArray (required): The fields of the form
- customValidationSchema : cf MuiForm
- preValidate : cf MuiForm
- customRenderInput - (params: { field: T, children?: Array<React$Node>, index: number, }) => ?React$Node : Function used to extend or override MUI renderInput
This component is used to extends MuiForm in association with FormComponent.
- decorators: Decorators for decorators props of react-final-form component
- dom: Inputs of the form (React$Node[])
- validate: Validation function for validate props of react-final-form component
- onSubmit : cf MuiForm
- initialValues : cf MuiForm
- columns : cf MuiForm
- rows : cf MuiForm
- renderSubmit : cf MuiForm
- devMode : cf MuiForm
- children : cf MuiForm