Form

Props

form

Your form class. Should implement init and update, and can implement any additional methods and fields you require for your logic.

init: (context: {[key:string]: any}) => void

update: (context: {[key:string]: any}, reason: UpdateReason) => void

context: {[key:string]: any}

These are your external dependencies. Could be:

• an object from the server
• some state you have
• t function from i18next package
• redux dispatch
• ...etc

onSubmit: (values: {[key:string]: any}, transformedValues: {[key:string]: any}) => void

This gets called when you submit the form, and all fields are valid (i.e. the errors state is an empty object)

Return props

Things you get in function as prop (children function) and through useFormContext.

fields: {[name: string]: ReactNode}

This is an object that contains all your fields already rendered for you to place at your will. This is done so you can have whatever form layout you want.

submitForm: () => void

Function to trigger submit.

resetForm: () => void

Function to trigger reset. When you call this function, the init method from your class will be called.

getFieldsStack: (filter?: (name: string) => boolean) => ReactNode[]

Function to get an array of rendered fields so you don't have to place every field individually. You get a filter function if you want to place some fields differently.

getValues: () => {[key: string]: any}

getErrors: () => {[key: string]: string}

getIsValid: () => boolean

Get if form is valid (i.e. the errors object is empty)

subscribe: (cb: (form: FormProp, reason: UpdateReason) => void) => void;

You can subscribe outside of the form to every change (value, error, context)

focusField: (name: string) => void;

Fmperatively focus a field. This depends on focusRef being passed to something with a focus method in your component.