如何使用 react-hook-form-mui 库更改验证错误消息?

How to change validation error message using react-hook-form-mui library?

提问人:wasor4ik 提问时间:10/5/2023 更新时间:10/5/2023 访问量:53

问:

我正在尝试学习 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":{}}}
JavaScript ReactJS 表单 验证材料 -UI

评论


答:

1赞 moshyfawn 10/5/2023 #1

根据 RHF MUI 源代码,该组件已经是使用 Controller 组件的受控输入,这意味着您无需使用 register 方法再次注册它。TextFieldElement

相反,它具有可以将验证规则传递到其中的道具。TextFieldElementvalidation

<TextFieldElement name="NAME" validation={{ required: "Error message" }} />

评论

0赞 wasor4ik 10/5/2023
非常感谢您的回答!像魅力一样工作。即使我知道 TextFieldElement 组件应该提供所需的一切,我自己也没有发现这一点。