FormProvider.md

FormProvider

FormProvider component provide methods and states from validator to child components.

Public interface

Props

Component takes several props:

• validator - validator instance. Required.

validator = new ModelValidator(ExampleModel);
validator = new SchemaValidator(ExampleSchema);

• onSubmit - method that triggers on submitting. Required.

  cancelUpdate object key indicates that form should not update state after submit. Optional.

public onSubmit = async (modelValues: {[key: string]: string | boolean | number}): Promise<void | { cancelUpdate?: boolean }> => {
    await someAction(modelValues);
}

• errorParser - method that triggers on unsuccessfully submitting. Optional.

public errorParser = (error: any): Array<{ attribute: string, details: string }> | any => {
    const parsedErrors = /*SOME ERROR PARSING CODE*/
    return parsedErrors; /*OR SOMETHING ANOTHER*/
}

• handleUnparsedErrors - flag that specify should the Form to handle errors that errorParser returned when that errors cannot be applied to model. Optional. Needed for UnparsedErrorProvider.

public handleUnparsedErrors: boolean;

• beforeSubmit - callback that triggers before submitting. Optional.

public beforeSubmit: () => void;

• afterSubmit - callback that triggers after submitting. Optional.

public afterSubmit: (hasErrors: boolean) => void;

Context

Component provide next context interface:

• onSubmit - method that triggers on submitting.

public onSubmit: () => Promise<void>;

• onValidate - method that triggers on validating.

public onValidate: (groups?: Array<string>): Promise<void>;

• setModelValue- method for setting value for model/schema

public setModelValue: (attribute: string, value: {[key: string]: string | boolean | number}) => void;

• hasErrors - flag that indicates errors existing.

public get hasErrors(): boolean;

• loading - flag that indicates submit process.

public loading: boolean;

• modelErrors - object that contains validation errors

public modelErrors: {
    [attributeName: string]: string;
}

• modelValues - object that contains model/schema values

public modelValues: {
    [attributeName: string]: boolean | string | number;
}

• unparsedError - contains unparsed error

public unparsedError?: any;

• unregisterElement - method for unregister user interactive element

public unregisterElement: (attribute: string) => void;

• registerElement - method for register user interactive element

public registerElement: (attribute: string, element: any) => boolean | never;

• registeredElements - list of registered elemtns

public registeredElements: {[key: string]: { focus: () => void }}

Usage

import * as React from "react";
import { FormProvider, FormProviderProps } from "react-formawesome-core";

class MyFormWrapper extends React.Component<FormProviderProps> {
    public render(): React.ReactNode {
        return (
            <FormProvider {...this.props}>
                <form>
                    {this.props.children}
                </form>
            </FormProvider>
        );
    }
}