Accessing transformed value in useWatch

[rhwork]

Hi,

I use Yup to set up a schema. In that schema I have a transformation that I apply as follows:

const schema = yup.object({
  amount: yup
    .number()
    .transform((_, o) => {
      const filtered = o?.toString().replace(/[^0-9]/g, "");
      if (filtered) {
        return +filtered;
      }
      return undefined;
    })
});

When watching the value as follows:

const amountValue = useWatch({ name: "amount", control: methods.control });

I get the pre-transformed value. Is there an option to apply the transformation within useWatch? any other way I can keep the code concise?

[leapful]

@rhwork

useWatch hook has nothing to do with transformation logic from schema object validation since it's only watching change on input original value.

You can use .pick() then perform .cast() to get the transformed value.

For example:

const name = 'amount';
const amount = useWatch({ name, control: methods.control });
const { amount: transformedAmount } = schema.pick([name]).cast({ amount });