Advanced Scenarios

The Form enables you to implement advanced use-case scenarios by using the FormRenderProps that are passed to the rendered component.

Reading the Field State

You can read the field state without using the KendoReact Field component by utilizing the valueGetter function in the FormRenderProps.

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
    return (
        <Form
            initialValues={{
                userCount: 20,
                ticketCount: 100
            }}
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
                    <Field name={'userCount'} type={'text'} component={NumericTextBox} />
                    <Field name={'ticketCount'} type={'text'} component={NumericTextBox} />
                    Total ticket price:
                    {
                        // A calculated value.
                        formRenderProps.valueGetter('userCount') * formRenderProps.valueGetter('ticketCount')
                    }
                    <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                        Submit
                    </button>
                </form>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Changing the Field Value

You can emit the field changes without using the KendoReact Field component by utilizing the onChange callback in the FormRenderProps.

const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));

    return (
        <Form
            initialValues={{
                price: 20
            }}
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <form onSubmit={formRenderProps.onSubmit} className={'k-form'}>
                    <Field name={'price'} type={'text'} component={NumericTextBox} />
                    <button
                        className={'k-button'}
                        onClick={(e) => {
                            e.preventDefault();
                            // Changing desired field value
                            formRenderProps.onChange('price', {value: 0});
                        }}
                    >
                        Clear price
                    </button>
                    <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                        Submit
                    </button>
                </form>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);