Проверка формы и сообщения об ошибках не работают

В настоящее время я работаю над несколькими формами для приложения и решил использовать Material UI и React Hook Forms для их создания. Основные функции работают, а это значит, что я могу продолжить, только когда все необходимые данные заполнены и я получаю нужные данные.

К сожалению, я не могу использовать проверку формы или отображение сообщений об ошибках, которые поставляются с формой React Hook. Он по-прежнему использует проверку Material UI, хотя я как можно точнее следил за документацией.

Вот что я хочу делать:

  • определить минимальную и максимальную длину ввода
  • введите шаблоны RegEx для ввода пароля
  • показать аккуратные сообщения об ошибках формы React Hook

Часть логики работает, часть нет. Вы можете помочь мне понять, почему? Заранее спасибо!

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>
  );
}

reactjs material-ui react-hook-form
person stevefrenzel    schedule 09.04.2020    source источник
comment
Предоставьте песочницу кода, которая воспроизводит вашу проблему. Кроме того, вы говорите, что часть логики работает, а часть нет. Уточните, пожалуйста, какая именно логика не работает.   -  person Ryan Cogswell    schedule 09.04.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вместо использования контроллера почему бы вам не использовать 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>
    }
person knigalye    schedule 13.04.2021