Trigger vs formState/useFormState

[Felixmurithi]

In which situations is thetrigger()API useful. isValid from formState/useFormState is always returned , when do u need to trigger the validation manually?

[PhibeeDeinla]

In which situations is thetrigger()API useful. isValid from formState/useFormState is always returned , when do u need to trigger the validation manually?

https://codesandbox.io/s/solitary-river-g5ztxx
You can check this sample bro.

You would likely utilize that for manual validations, such as in a Form Wizard, where there's no need to create multiple forms or useform for every steps; instead, you focus solely on the fields within the current step and using only one form.

[BrendanC23]

trigger() is useful to control when the validity of a field should be re-computed (which then shows or hides the error message). I use trigger() to re-validate a field when it has been updated programmatically. For example, let's say I have a form with a dropdown to allow selection of a person from a list, a first name, and a last name. Some people on the list may not have both a first name and last name, but the form requires that both be entered.

const schema = z.object({
    id: z.string().min(1),
    firstName: z.string().min(1),
    lastName: z.string().min(1)
});

type FormSchema = z.input<typeof schema>;

const people = [{
        id: "1",
        firstName: "First1",
        lastName: ""
    },
    {
        id: "2",
        firstName: "First2",
        lastName: "Last2"
    }
]

const defaultValues: FormSchema = {
    id: "",
    firstName: "",
    lastName: ""
}


function Form() {
    const form = useForm({
        resolver: zodResolver(schema),
        defaultValues
    });

    async function idChanged(user: FormSchema) {
        form.setValue("firstName", user.firstName);
        form.setValue("lastName", user.lastName);

        await form.trigger("firstName");
        await form.trigger("lastName");
    }

    return (
        <>
            <SelectInput form={form} name = "id" options={people} label = "ID" onChange={idChanged} />
            <TextInput form={form} name="firstName" label="First Name" />
            <TextInput form={form} name="lastName" label="Last Name" />
        </>
    );
}

When a user selects the option with id 1, the first name will be set to First1 and the last name will be empty. trigger() will be called on both fields and an error will be shown for lastName. If the user then selects id 2, the first and last name fields will trigger again, and because the lastName is now populated, the error will disappear.