Как проверить длину и наличие пароля в этой rc-форме?

Question

Я создаю форму входа администратора с адресом электронной почты и паролем. Я хотел бы проверить длину пароля и убедиться, что поле пароля не пусто до отправки формы.

import { createForm, formShape } from 'rc-form'
import React ,{Component} from 'react'
import PropTypes from 'prop-types'

class LoginForm extends React.Component {

static propTypes = {
 form: formShape,
};

onSubmit = (e) => {
 e.preventDefault();
 this.props.form.validateFields((error, values) => {
  if (!error) {
    console.log('ok', values);
  } else {
    console.log('error', error, values);
  }
 })
}

render() {
const {getFieldProps, getFieldError} = this.props.form
const errors = getFieldError('password')
const {form} = this.props
return (
  <form onSubmit={this.onSubmit}>
    <div>
      <div>
        Enter password
      </div>
      <input
      placeholder='Enter your password'
      {...getFieldProps('password', {
        validate: [
          {
            trigger: 'onBlur',
            rules: [
              {
                required: true,
              }
            ],
          },
          {
            trigger: ['onBlur', 'onChange'],
            rules: [
              {
                type: 'password',
                min: 5,
              }
            ]
          }
        ]
      } ) }
      />
      <div>
        {errors ? errors.join(',') : null}
      </div>
      <button onClick={this.onSubmit}>Connect</button>
    </div>
  </form>
)
}
}

export default createForm()(LoginForm)

Я ожидаю сообщение об ошибке, если пароль меньше 5 символов или отсутствует, но в настоящее время я не получаю сообщение об ошибке.

Answer 1

Правило для длины пароля должно иметь тип string, а не password.

Пример: https://stackblitz.com/edit/react-rpvgmh