检查两个 TextField 与 react-hook-form 具有相同的值

Question

我有一个表格，我想检查两个输入的值是否相同，我的表格是这样的：

function FormDatosIcfes(){
            
    const classes = useStyles();  
    const {register, handleSubmit, control, errors} = useForm();
        return (
            <Box>
                <center>Formulario Datos del ICFES</center>
                <hr/>
                <form noValidate onSubmit={handleSubmit((data)=> console.log(JSON.stringify(data)))}>
                    <TextField
                    variant="outlined"
                    margin="normal"
                    inputRef={register({ required: true })}
                    required
                    fullWidth
                    type="number"
                    id="documentoIcfes"
                    label="Documento presentado en el ICFES"
                    name="documentoIcfes"
                    autoComplete="number"
                    autoFocus
                    /> 
                    {errors.documentoIcfes && <span className={classes.errores}>Este campo es obligatorio</span>}

                    <TextField
                    variant="outlined"
                    margin="normal"
                    inputRef={register({ required: true })}
                    required
                    fullWidth
                    id="snpIcfes"
                    label="SNP ICFES"
                    name="snpIcfes"
                    autoComplete="text"                    
                    />
                    {errors.snpIcfes && <span className={classes.errores}>Este campo es obligatorio</span>}
                    <TextField
                    variant="outlined"
                    margin="normal"
                    inputRef={register({ validate: value => value === **HERE snpIcfes VALUE** || 'error message' })}
                    required
                    fullWidth
                    id="snpIcfesConfirmacion"
                    label="Confirmación SNP ICFES"
                    name="snpIcfesConfirmacion"
                    autoComplete="text"                    
                    />   
                    {errors.snpIcfesConfirmacion && <span className={classes.errores}>Este campo debe ser igual al SNP ICFES</span>}                 
                    
                    
                    <Button
                    type="submit"
                    fullWidth
                    variant="contained"
                    color="primary"
                    className={classes.submit}
                    >
                    Guardar
                    </Button>
                </form>
            </Box>
            );
}

并且输入是 snpIcfes 和 snpIcfesConfirmacion，我如何使用寄存器验证来检查它？我正在使用 https://material-ui.com/es/api/text-field/ 和 react-hook-form

Answer 1

你可以像这样使用 getValues("id-input"):

inputRef={register({ validate: value => value === getValues("snpIcfes") || ' - debe ser igual al SNP ICFES' })}

查看文档： https://react-hook-form.com/api#getValues

检查两个 TextField 与 react-hook-form 具有相同的值

check two TextField have the same value with react-hook-form

reactjs

material-ui

next.js

react-forms