How to call onFinish method outside the form in ant design framework

Viewed 205

I have created a form using ant design framework, where I am dispatching one action on form submit. My issue is, that checkbox outside the form, when checkbox click I would like to call onFinish method or get the latest values of form fields, The intention is to perform same action as onFinish button,

sample UI

enter image description here

<div className="homepage-widget-header">
<div className="text-ellipsis">{GpsConstants.WIDGET_NAME}</div>
  <Checkbox checked={isDisable} onChange={(checked) => stopSendingDataToBackend (checked)} 
                className="homepage-widget-checkbox text-ellipsis" >{HomepageConst.CHECKBOX_HEADER} 
          </Checkbox>
            </div>
            <div className="homepage-widget" >
                <div className="gpscoordinates">
                    <Form
                        {...layout}
                        className="gps-coordinates-form"
                        onFinish={onApply}

                    >
                        <Form.Item
                            label={GpsConstants.LATITUDE}
                            name="latitude"
                            initialValue="25.328380"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please enter latitude!',
                                },
                            ]}
                        >
                            <InputNumber />
                        </Form.Item>

                        <Form.Item
                            label={GpsConstants.LONGITUDE}
                            name="longitude"
                            initialValue="51.435989"
                            rules={[
                                {
                                    required: true,
                                    message: 'Please enter longitude!',
                                },
                            ]}

                        >
                            <InputNumber />
                        </Form.Item>

                       <Form.Item {...tailLayout} className="ant-form-item-last">
                          <div>
                             <div className="apply-coordinates">
                                    <Button type="primary" htmlType="submit">
                                        {GpsConstants.APPLY}
                                    </Button>
                                </div>


                            </div>
                        </Form.Item>
</div>

and I have APPLY button which is being called onFinish

const onApply = (values) => {
        console.log('Success:', values);
        dispatch({
            type: "updateGPSCoordinates",
            latitude: values.latitude,
            longitude: values.longitude,
            altitude: values.altitude
        });
    };

and onChange on checkbox there is method like below

const stopSendingDataToBackend = (e) => {
        setCheckBoxDisable(e.target.checked)
        console.log(isDisable);
        if (!isDisable) {
            dispatch({
                type: "stopgpsdata",
                stop_sending: !isDisable,
                message_type: 'GPS'
            })
        } else {
            console.log("send latest values to backend");
            // I trying to access form data inside or call onApply method here.

        }
    }
0 Answers
Related