Forms

Introduction#

We have a powerful form builder to handling user inputs though forms. This form builder capture user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.

const {form, formHandler, formController, clear, isValid} = useFormBuilder({
        [key]: ['default value', validator] // initial form model
    }, 'form-key')

Main Features#

Mainly useFormBuilder() equipped with three supporting hooks

useFormController(controller, id) // Use to bind form field
    useFormSelector(formKey) // Use to get form model from formKey
    useSingleFormFieldController() // Use to get all detail about specific form field. first hook build from this

Build a form#

You can use useFormBuilder() hook to build a form easily.

const {form, formHandler, formController, clear, isValid} = useFormBuilder({}, 'form-key')

Form binding#

Simply use this example to bind form field.. don't mess with useFormController()

<TextInput label={'Name'} id={'name'} controller={formController}/>

Build a custom form field#

You can use useFormController() hook to build a custom form field easily. This hook is provide the way to bind your custom form field to the main form model. Already implemented internally in default form fields

const {value, formHandler, isValid, error} = useFormController(controller, id)

Access selected form model#

You can use useFormSelector() hook to access selected form model.

const {form, get} = useFormSelector(formKey)

Core access to the form field#

You can use useSingleFormFieldController() hook to get more core level access to form field. useFormController() is a implementation of this hook. Most of the time you don't want to mess with these hooks

const {value, formHandler, validation, validationTrigger, clear} = useSingleFormFieldController(controller, id)

Form validation#

You just need to add validation right after the initial value.

// Initial data model
    {
        name: ["Dinesh", validator.string()],
        age: [12, validator.number()],
        assigned_to: [, validator.string()]
    }

Check form validation#

const {form, formController, clear, isValid} = useFormBuilder({
        name: ["Dinesh", validator.string().required('Please Enter First Name')],
        age: [12, validator.number().typeError("Should be a number")],
        assigned_to: [, validator.string().required('Assignee is a required field')]
    }, 'builder-from')
    await isValid() // true || false

Error message#

You can add error message like below with yup.

validator.string().required('Error Message')

Examples#

const {form, formController, clear, isValid} = useFormBuilder({
        name: ["Dinesh", validator.string().required('Please Enter First Name')],
        age: [12, validator.number().typeError("Should be a number")],
        assigned_to: [, validator.string().required('Assignee is a required field')]
    }, 'builder-from')
    <Stack>
        <TextInput label={'Name'} id={'name'} controller={formController}/>
        <TextInput label={'Age'} id={'age'} controller={formController}/>
    </Stack>