Question

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

很遗憾，我无法使用表单验证或 React Hook Form 随附的错误消息显示。即使我尽可能接近文档，它仍然使用材料UI 验证。

这就是我想要做的：

定义输入的最小和最大长度
输入RegEx模式以输入密码
显示 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>
  );
}

Answer 1

为什么不使用 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>
    }

问：表单验证和错误消息不起作用（材料UI + React Hook表单）

1 个答案: