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) => (
                <FormElement style={{maxWidth: 650}}>
                    <Field name={'userCount'} type={'text'} component={NumericTextBox} />
                    <br />
                    <Field name={'ticketCount'} type={'text'} component={NumericTextBox} />
                    <br />
                    Total ticket price:
                    <strong>
                        {
                            // A calculated value.
                            formRenderProps.valueGetter('userCount') * formRenderProps.valueGetter('ticketCount')
                        }
                    </strong>
                    <div className="k-form-buttons">
                        <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                            Submit
                        </button>
                    </div>
                </FormElement>
            )}
        />
    );
};
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) => (
                <FormElement style={{maxWidth: 650}}>
                    <FieldWrapper>
                        <Field name={'price'} type={'text'} component={NumericTextBox} />
                    </FieldWrapper>
                    <br />
                    <button
                        className={'k-button'}
                        onClick={(e) => {
                            e.preventDefault();
                            // Changing desired field value
                            formRenderProps.onChange('price', {value: 0});
                        }}
                    >
                        Clear price
                    </button>
                    <div className="k-form-buttons">
                        <button type={'submit'} disabled={!formRenderProps.allowSubmit} className={'k-button'}>
                            Submit
                        </button>
                    </div>
                </FormElement>
            )}
        />
    );
};
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);