избыточная форма - проверка ввода соответствует определенной длине - PullRequest
Новая
       10

избыточная форма - проверка ввода соответствует определенной длине

0 голосов
/ 25 июня 2018

Я работаю с Redux Form и создаю проверку, которая проверит, соответствует ли поле точно X количеству символов. Мой подход состоит в том, чтобы определить длину входных данных и сравнить с указанной длиной. Я могу успешно записывать в журнал каждый ввод символов, но получаю сообщение об ошибке при попытке ввести длину ввода.

Как определить длину ввода в файле validator.js

Сообщение об ошибке: «Ошибка типа: невозможно прочитать свойство« длина »из неопределенного» * ​​1005 * 

//component.js (Redux Form)
import React from 'react';
import {reduxForm, Field, SubmissionError, focus} from 'redux-form';
import Input from './input';
import {exactSix} from '../validators';

export class Contact extends React.Component {
  // onSubmit(values) {}

  render() {
      return (
          <form
            onSubmit={this.props.handleSubmit(values =>
              this.onSubmit(values)
          )}>
            <Field 
                name="content"
                type="text"
                component={Input}
                label="Match"
                validate={[exactSix]}
            />
            <button
                type="submit"
                disabled={this.props.pristine || this.props.submitting}>
                Send message
            </button>
          </form>
      );
    }
  }

export default reduxForm({
    form: 'contact',
    onSubmitFail: (errors, dispatch) =>
        dispatch(focus('contact', Object.keys(errors)[0]))
})(Contact);



//validator.js
export const exactSix = value => {
  console.log(value);
  console.log(values.length); //this line is highlighted within the error message
  if(value.length === 6){
    return undefined;
  } else {
    return 'must be exactly six';
  }
}

1 Ответ

0 голосов
/ 27 июня 2018

Вам необходимо проверить, не является ли value неопределенным: 

export const exactSix = value => {
    return value && value.length !== length
        ? `must be exactly six`
        : undefined;
};

Codesandbox demo

...