How to add a error/validation message inside the renderer in react hook

Admin 1
Viewed 56
{
  label: "Room",
  name: "room",
  type: "select",
  rule: yup.string().required(),
  renderer: (data: any) => {
    const { control, register, errors } = useFormContext();
    return (
      <SelectPicker
        placeholder="Room"
        data={
         { label: 'Room 1', value: 1 }
        }
        style={{ width: '100%' }}
        value={control.getValues()['room']}
      />
    );
  }
}

How to add a error/validation message inside the renderer?

What I'm trying to do here is to add a validation/error message for example "Room is required". Because after I submit the form it doesn't display the error message.

yup typescript next.js reactjs
1 Answers

You can use Field-level Validation. It will run after any onChange and onBlur event by default. Add a validate prop to your SelectPicker for it to work:

<SelectPicker
  placeholder="Room"
  data={{ label: "Room 1", value: 1 }}
  validate={value => {
    if (!value) {
      return "Required";
    }
  }}
  style={{ width: "100%" }}
  value={control.getValues()["room"]}
/>
user_74908710
Related