From a83fdf3358d97154d7e4d6758722e2ee82575c92 Mon Sep 17 00:00:00 2001 From: sadik_malik Date: Sat, 6 Apr 2024 11:43:24 +0530 Subject: [PATCH] fix(RadioButtonGroup): allow passing custom required error message and validations --- packages/rhf-mui/src/RadioButtonGroup.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/rhf-mui/src/RadioButtonGroup.tsx b/packages/rhf-mui/src/RadioButtonGroup.tsx index b8b0807..605bcb4 100644 --- a/packages/rhf-mui/src/RadioButtonGroup.tsx +++ b/packages/rhf-mui/src/RadioButtonGroup.tsx @@ -6,6 +6,7 @@ import { FieldValues, PathValue, useController, + UseControllerProps, } from 'react-hook-form' import { FormControl, @@ -27,6 +28,7 @@ export type RadioButtonGroupProps< TName extends FieldPath = FieldPath, TValue = unknown > = { + validation?: UseControllerProps['rules'] options: TValue[] helperText?: ReactNode name: TName @@ -87,6 +89,7 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup< disabled, formLabelProps, transform, + validation = {}, ...rest } = props const theme = useTheme() @@ -94,12 +97,18 @@ const RadioButtonGroup = forwardRef(function RadioButtonGroup< const errorMsgFn = useFormError() const customErrorFn = parseError || errorMsgFn + const rules = { + ...validation, + ...(required && + !validation.required && {required: 'This field is required'}), + } + const { field, fieldState: {error}, } = useController({ name, - rules: required ? {required: 'This field is required'} : undefined, + rules, disabled, control, })