提问人:wasor4ik 提问时间:10/5/2023 更新时间:10/5/2023 访问量:53
如何使用 react-hook-form-mui 库更改验证错误消息?
How to change validation error message using react-hook-form-mui library?
问:
我正在尝试学习 react-hook-form-mui 库。这个项目的文档很短。我尝试了不同的方法,但不幸的是,它们都不起作用。我只需要将验证规则添加到我的表单字段中。这是我的功能组件代码。
export default function FormDialog({ showDialog, closeDialog }) {
const onSumbit = (data) => {
console.log(data)
}
const onError = (error) => {
console.log(error)
}
const { register, setError, formState: { errors } } = useForm()
return (
<div>
<Dialog
open={showDialog}
onClose={closeDialog}
maxWidth={'xl'}
>
<FormContainer
onSuccess={onSumbit}
onError={onError}
>
<DialogTitle>ADD Item</DialogTitle>
<DialogContent>
<DialogContentText>
Please fill form fields
</DialogContentText>
<div>
<TextFieldElement
{...register("NAME", { required: "Error message" })}
sx={{ width: '100px' }}
className={styles.formField}
name={"NAME"}
label={"Name"}
required
/>
</div>
</DialogContent>
<DialogActions>
<Button type={'submit'} variant={'contained'} color={'primary'}>
Submit
</Button>
<Button onClick={closeDialog}>Cancel</Button>
</DialogActions>
</FormContainer>
</Dialog>
</div>
);
}
如您所见,我正在尝试使用 react-hook-form v7 库中的方法,但这似乎不是正确的方法,我从{...register(name, { options })
console.log(error)
{"NAME":{"type":"required","message":"This field is required","ref":{}}}
而不是
{"NAME":{"type":"required","message":"Error message","ref":{}}}
答:
1赞
moshyfawn
10/5/2023
#1
根据 RHF MUI 源代码,该组件已经是使用 Controller
组件的受控输入,这意味着您无需使用 register
方法再次注册它。TextFieldElement
相反,它具有可以将验证规则传递到其中的道具。TextFieldElement
validation
<TextFieldElement name="NAME" validation={{ required: "Error message" }} />
评论
0赞
wasor4ik
10/5/2023
非常感谢您的回答!像魅力一样工作。即使我知道 TextFieldElement 组件应该提供所需的一切,我自己也没有发现这一点。
评论