@capcar/final-form-generator-mui NPM

Final Form Generator MUI

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