set required dynamically

[florian-bretz-pt]

Hi,
I have an issue which I'm not able to solve yet.
In my form, there are some input fields, which should be dynamically required, based on some other input, like a checkbox or a dropdown selection.

• Let's say I have an input A and B which should always be required and another input C which should only be required when a checkbox - is checked.
• Let's say the checkbox is initially checked, so C is required.
• When I submit the empty form I get the expected errors for A, B and C.
• When I then uncheck the checkbox (which should make input C not required anymore) I still see the error, because the error state for C wasn't revalidated (I assume)
• I watch() the checkbox to track its current state and use this value for the required state of C
• Even though the conole.log shows the checkbox value false, the required attribute seems to never get changed.
• Following the docs and some threads, there is the method trigger which can revalidate input(s). The problem is, that this will validate the form immediately, showing the error, without me trying to submit the form. And the even bigger problem is, that even when I uncheck the box and fire the useEffect with the trigger the error remains for some reason.

the question now is, how can I have rules dynamically rules applied on my inputs, for example required state depending on some other input and then revalidate the field (error) state when this other input has changed?

some example implementation:

const MyForm = () => {
    const {
        control,
        handleSubmit,
        formState: { errors: formErrors },
        watch,
        trigger,
    } = useForm({
        defaultValues: { a: '', b: '', c: '', check: true },
        mode: 'onChange',
    })
    const cRequired = watch('check')
    console.log('cRequired', cRequired)

    useEffect(() => {
        trigger('c')
    }, [cRequired])

    return (
        <form
            style={{ border: '1px solid black' }}
            onSubmit={handleSubmit(() => {
                console.log('submit')
            })}
        >
            <Controller
                name={'a'}
                control={control}
                render={({ field, fieldState: { error } }) => (
                    <SomeInputField
                        {...field}
                        label={'a'}
                        placeholder={'a'}
                        showLabel={true}
                        error={!!error}
                        errorText={'error text a'}
                        mandatory={true}
                    />
                )}
                rules={{ maxLength: 200, required: true }}
            />
            <Controller
                name={'b'}
                control={control}
                render={({ field, fieldState: { error } }) => (
                    <SomeInputField
                        {...field}
                        label={'b'}
                        placeholder={'b'}
                        showLabel={true}
                        error={!!error}
                        errorText={'error text b'}
                        mandatory={true}
                    />
                )}
                rules={{ maxLength: 200, required: true }}
            />
            <Controller
                name="check"
                control={control}
                render={({ field }) => (
                    <RadioGroup
                        {...field}
                        row
                        onChange={(_event, value) => {
                            field.onChange(value)
                        }}
                        value={field.value}
                        name="radio-buttons-group"
                    >
                        <FormControlLabel
                            id="radio-button-true"
                            disabled={false}
                            value={true}
                            control={<Radio />}
                            label={'true'}
                        />
                        <FormControlLabel
                            id="radio-button-false"
                            disabled={false}
                            value={false}
                            control={<Radio />}
                            label={'false'}
                        />
                    </RadioGroup>
                )}
            />
            <Controller
                name={'c'}
                control={control}
                render={({ field, fieldState: { error } }) => (
                    <SomeInputField
                        {...field}
                        label={'c'}
                        placeholder={'c'}
                        showLabel={true}
                        error={!!error}
                        errorText={'error text c'}
                        mandatory={cRequired}
                    />
                )}
                rules={{
                    maxLength: 200,
                    required: cRequired,
                }}
            />
            <button type="submit">submit</button>
        </form>
    )
}

Would be happy for any hints or help. ✌️

[bombillazo]

I have the same question, It seems like once a rule is applied, even when the rules prop changes it is still somehow tracked