Q: Проверка формы и сообщения об ошибках не работают (Material UI + React Hook Form)

Question

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

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

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

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

Некоторые логи c работают, некоторые нет. Можете ли вы помочь мне понять, почему? Заранее спасибо!

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