What events causes the resolver to be trigger?

[everurstruly]

I'm trying to figure out what event actually triggers the resolver. I'm calling the trigger function on a nested form field, but it's not kicking in the validation from the resolver schema. I'm using Zod

Although I haven't defined the resolver schema for every single field in my form, but I don't think that should stop the nested field validation from working. Am I missing something?

Would appreciate any pointers!

// child-component.ts

const {
  register,
  control,
  trigger,
  setValue,
  reset,
  getValues,
  clearErrors,
  formState,
} = useFormContext<SaleForm>();

const format = useWatch({ name: "entry.format" });
const imageUploads = useWatch({ name: "entry.images", defaultValue: [] });

const canAddEntry = useCallback(async () => {
  if (format === "ECODE") {
    await trigger(["entry.amount", "entry.ecode"]);
    clearErrors("entry.images");
  }

  if (format === "IMAGE") {
    await trigger(["entry.amount", "entry.images"]);
    clearErrors("entry.ecode");
  }

  // COMMENT (Dev): This code below works fine
  // const entry = getValues("entry");
  // const validation = saleOrderFormValidator.safeParse({ entry });
  // return validation.success;
}, [format, imageUploads]);

renders => (
  <Button
    color="primary"
    radius="sm"
    size="lg"
    fullWidth
    isDisabled={!!canAddEntry()}
    onPress={() => handleAddEntry()}
  >
    Add Card
  </Button>
)

// parent-component (form-provider).ts

export type CardValueImages = Array<FileInputPayload>;

export type SaleForm = {
  region: string;
  amount: number;
  format: "IMAGE" | "ECODE";
  ecode?: string;
  images?: CardValueImages;
  comment?: string;
  quantity: "SINGLE" | "MANY";
  entry: {
    amount: number;
    format: "IMAGE" | "ECODE";
    ecode?: string;
    images: CardValueImages;
  };
};

export const saleOrderFormValidator = z.object({
  entry: z.object({
    format: z.enum(["IMAGE", "ECODE"]),
    amount: z.number().min(5),
    ecode: z.string().regex(/^[A-Za-z0-9]+$/),
    images: z.array(z.instanceof(IFileInputPayload)).min(1),
  }),
});

const formCtx = useForm<SaleForm>({
  resolver: zodResolver(saleOrderFormValidator),
  defaultValues: {
    region: regions[0].key,
    quantity: "SINGLE",
    format: "IMAGE",
    amount: 0,
    ecode: "",
    images: [],
    entry: {
      format: "IMAGE",
      ecode: "",
      images: [],
      amount: 0,
    },
  },
});

[everurstruly]

The code above results in an infinite loop because I'm updating the formState error on every render from calling "canAddEntry" function. After the fix, it works fine and as expected