0

我目前正在为一个应用程序开发几种表单，并选择使用Material UI和React Hook Forms来构建它们。基本功能正在运行，这意味着我只能在填写所有必需的输入并且获得所需的数据时才能继续。

不幸的是，我无法使用React Hook Form附带的表单验证或错误消息显示。它仍在使用Material UI验证，尽管我尽可能接近文档。

这是我希望能够做到的：

  • 定义输入的最小和最大长度
  • 输入密码输入的正则表达式模式
  • 显示React Hook Form整洁的错误信息

有些逻辑有效，有些则无效。你能帮我弄清楚为什么吗？先感谢您！

import React from 'react';
import { useForm, Controller } from 'react-hook-form';
import { Link } from 'react-router-dom';

// COMPONENTS
import Button from '../01-atoms/inputs/Button';
import Textfield from '../01-atoms/inputs/Textfield';

// MATERIAL UI - CORE
import Fade from '@material-ui/core/Fade';
import Grid from '@material-ui/core/Grid';
import InputAdornment from '@material-ui/core/InputAdornment';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';

// MATERIAL UI - ICONS
import LockSharpIcon from '@material-ui/icons/LockSharp';
import PersonAddSharpIcon from '@material-ui/icons/PersonAddSharp';

export default function SignUp({ i18n, submitSignUpData }) {

  const { register, handleSubmit, control, errors } = useForm();

  return (
    <Grid item xs={12} sm={6} md={3}>
      <Fade in>
        <Paper elevation={3}>
          <Typography align='center' gutterBottom variant='h5'>
            {i18n.sign_up.page_title}
          </Typography>

          <form onSubmit={handleSubmit(submitSignUpData)}>
            <Grid container spacing={1}>

              <Grid item xs={12}>
                <Controller
                  // This is not working:
                  rules={register({
                    required: true,
                    minLength: 8,
                  })}
                  // But this is:
                  required
                  as={Textfield}
                  name='newPassword'
                  control={control}
                  defaultValue=''
                  fullWidth
                  label={i18n.login.password_placeholder}
                  variant='outlined'
                  type='password'
                  InputProps={{
                    endAdornment: (
                      <InputAdornment position='end'>
                        <LockSharpIcon />
                      </InputAdornment>
                    ),
                  }}
                />
                {errors.newPassword && 'Your input is required!'}
              </Grid>

              <Grid item xs={12}>
                <Button
                  fullWidth
                  content={i18n.sign_up.get_started_button}
                  variant='contained'
                  color='secondary'
                  type='submit'
                  endIcon={<PersonAddSharpIcon />}
                />
              </Grid>
            </Grid>
          </form>
          <Link to='/log-in'>
            <Typography>{i18n.login.login_button}</Typography>
          </Link>
        </Paper>
      </Fade>
    </Grid>
  );
}
4

1 回答 1

0

除了使用控制器，为什么不使用Material UI 的TextField。我的代码中有这样的东西。

    <TextField
      name="newPassword"
      label="Password"
      inputRef={register({ required: true, minLength: 8 })}
      defaultValue=''
    />
    {
      errors.newPassword &&
      <ErrorText>
        {errors.newPassword.type === "required" ?
          'Password is required.' :
          `Min character limit for Password is 8.`}
      </ErrorText>
    }
于 2021-04-13T09:24:53.900 回答