Access schema rules within Controller

[dominic-ast-axa]

I use react-hook-forms with schema validation (Zod) and MUI. Now a try to access the validation rules of the corresponding field within the "" tag, to "forward" them to the MUI-Component. For example: I would like to set required option in the MuiTextField, if the validation-rules for the corresponding field contain the required rule - which was derived from the Zod model. The same I try to achieve for things like max and min and other rules. Background is, that I try to have a single type model, which is used for validation but also for input restrictions. I did not yet figure out, out to do that - but it should be possible, I guess. I am also interessted in your approaches to achieve that goal. Thank you for any hint!

Best regards, Dominic

const testSchema = z.object({
  employer: z.string()
});

// ---

const { handleSubmit, control, reset, watch, setValue } = useForm<AddIncomeDto>({
  resolver: zodResolver(testSchema)
});

// ---

<TextField
  name={'employer'}
  label={t('personaldata.employer')}
  placeholder={t('personaldata.employer')}
  control={control}
/>

// ---

<Controller
  name={name}
  control={control}
  render={({ field, fieldState }) => {
    return (
      <>
        <TextField
          error={!!fieldState.error}
          onChange={field.onChange}
          value={field.value || ''}
          {...(!!VALIDATION RULES FOR THIS FIELD CONTAINS REQUIRED!! ? { required: required } : {})}
        />
      </>
    );
  }}
/>

[Moshyfawn]

You can simply export your schema and re-import it in your components to access schema.shape.employer.isOptional()