React/AntDesign 触发 Form.Item 事件重新验证

Question

Problem Context

I am collecting user input using an AntDesign Form inside a functional component. The user must watch a video clip and determine the relative time period where some event occurred in the video consisting of 'start-time' and 'end-time' in the form (HH:MM:SS) - (HH:MM:SS), for example, 00:05:30 - 00:05:35 (a 5 second time period).

The Form to collect this data is made up of two <Form.Items>. One to collect start-time and the other to collect end-time. (There are other cases for how the form may be constructed so the Form.Items, in this case, are returned as JSX to be wrapped in a Form in the render method.) Like so:

const timeInput = () => {
    return (
        <>
        <Form.Item
            name={"start-time"}
            hasFeedback
            rules={[
                {
                    required: true,
                    message: 'Required',
                },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        return startTimeInputValidator(getFieldValue, "end-time", value)
                    }
                })
            ]}
        >
        <Input 
        id="start-time-input"
        placeholder={"Start Time (HH:MM:SS)"} />
        </Form.Item>

        <Form.Item
            name={"end-time"}
            hasFeedback
            rules={[
                {
                    required: true,
                    message: 'Required',
                },
                ({ getFieldValue }) => ({
                    validator(_, value) {
                        return endTimeInputValidator(getFieldValue, "start-time", value)
                    }
                })
            ]}
        >
        <Input 
        id="end-time-input"
        placeholder={"End Time (HH:MM:SS)"} />
        </Form.Item>
        </>
    )        
}

The input for each form item is validated with custom validators imported from a separate file:

const regexTime = /^(?:[01]\d|2[0123]):(?:[012345]\d):(?:[012345]\d)$/;
const timeInvalidDesc = "Not a Valid Time!";
const doStartTimeDesc = "Start Time Invalid!";
const timeMismatchDesc = "End Time must be after Start Time!";

export async function startTimeInputValidator(getFieldValue, field, text) {
    var endTime = getFieldValue(field);
    if (!text) {
        return Promise.resolve();
    }
    if(text.length<8) {
        return Promise.reject();
    }
    if (!regexTime.test(text)) {
        return Promise.reject(new Error(timeInvalidDesc));
    }
    if(regexTime.test(endTime)) {
        let stn = timeToInt(text);
        let etn = timeToInt(endTime);
        if(stn > etn) {
            return Promise.reject(new Error(timeMismatchDesc));
        }
    }
    return Promise.resolve();
}

export async function endTimeInputValidator(getFieldValue, field, text) {
    var startTime = getFieldValue(field);
    if (!text) {
        return Promise.resolve();
    }
    if(text.length<8) {
        return Promise.reject();
    }
    if (!regexTime.test(text)) {
        return Promise.reject(new Error(timeInvalidDesc));
    }
    if (!regexTime.test(startTime)) {
        return Promise.reject(new Error(doStartTimeDesc));
    }
    let stn = timeToInt(startTime);
    let etn = timeToInt(text);
    if(stn > etn) {
        return Promise.reject(new Error(timeMismatchDesc));
    }
    return Promise.resolve();
}

The validators correctly ensure that the user has entered a valid time in the form 'HH:MM:SS' and they also correctly ensure that the 'end-time' is not before the 'start-time', that is, it is impossible to submit the form if the 'end-time' is before the 'start-time' because I assume when the user submits the form the fields are re-validated.

The problem occurs when the user:

1. Enters a valid 'start-time' (incomplete form)
   • ex: 00:00:05 - null
2. Enters a valid 'end-time' (valid complete form)
   • ex: 00:00:05 - 00:00:10
3. Changes the 'start-time' to be AFTER the 'end-time' (invalid complete form)
   • ex: 00:00:15 - 00:00:10
4. Changes the 'end-time' to be AFTER the new 'start-time' ( should be a valid complete form)
   • ex: 00:00:15 - 00:00:20

Now, in the above case, the form should not show error messages given that the input is valid and the times are in the correct order, but it will still show an error message for the start-time field because during step 4 the validator for 'start-time' was not triggered.

Question

My question boils down to this: How can I re-validate the 'start-time' when there is a change to 'end-time' input (and vice versa) with the goal of responsive updating of error messages as the user changes their input? In other words, how can I validate both Form.Items when a change occurs to the input of either?

Apologies if I took too long to get to the heart of the question. I assume too much context is better than too little. Thank you in advance.

Answer 1

You should set the dependencies property of the field "end-time"
Documentation: https://ant.design/components/form/#dependencies