FormGroupProvider.md

FormGroupProvider

FormGroupProvider component is provide methods and states for controlling user-interactive elements (input / select ..ets).

Public interface

Props

Component takes several props:

• attribute - name of model attribute that should be under control. Required.

public attribute: string;

• validateOn - prop that define when validate value. Optional.

public validateOn: "change";
public validateOn: "focus";
public validateOn: "blur";
public validateOn: (modelValues, modelErrors) => boolean;
public validateOn: ["change", "focus", "blur"] // Ok
public validateOn: ["change", (modelValues, modelErrors) => boolean] // 'change' have highest priority and second item will be ignored
public validateOn: [(modelValues, modelErrors) => boolean, (modelValues, modelErrors) => boolean] // first item have highest priority and second item will be ignored
public validateOn: ["focus", "blur", (modelValues, modelErrors) => boolean] // Ok

Context

Component provide next context:

• error - contains validation error message.

public error?: string;

• value - contains attribute value.

public value: string | boolean | number;

• isFocused - flag that indicates element focus state.

public isFocused: boolean;

• onChange - method that triggers when value in element was changed. Return promise if validateOn prop is change or function

public onChange: (value: string | boolean | number) => void | Promise<void>;

• onFocus - method that triggers when element is focused. Return promise if validateOn prop is focus.

public onFocus: () => void | Promise<void>;

• onBlur - method that triggers when element is lost focus. Return promise validateOn prop is blur.

public onBlur: () => void | Promise<void>;

• registerElement - method for register user interactive element.

public registerElement: (element: any) => void;

• unregisterElement - method for unregister user interactive element.

public unregisterElement: () => void;

Usage

import * as React from "react";
import { FormGroupProvider, FormGroupProviderProps } from "react-formawesome-core";

class MyFormGroupWrapper extends React.Component<FormGroupProviderProps> {
    public render(): React.ReactNode {
        return (
            <FormGroupProvider {...this.props}>
                <div>
                    {this.props.children}
                </div>
            </FormGroupProvider>
        );
    }
}