Formik + yup не отображает ошибки - PullRequest
Новая
       11

Formik + yup не отображает ошибки

0 голосов
/ 06 сентября 2018

У меня есть следующая форма: 

import React from 'react'
import PanelInputField from './form_components/panel_input_field'
import * as yup from 'yup'
import { withFormik, FormikErrors, FormikProps } from "formik";

const validationSchema = yup.object().shape({
  length: yup
    .number()
    .min(200, 'NOT BIG ENOUGH')
    .required()
})

class SpecificationsForm extends React.PureComponent {
  render() {
    const {
      values,
      handleInputChange,
      handleSelectChange,
      touched,
      errors
    } = this.props;

    console.log(errors)
    return (
      <div className="panel panel-default specifications-panel" id="js-turbosquid-product-specifications-panel">
        <div className="panel-heading">
          <a href="#" className="js-more-info" data-toggle="collapse" data-target="#specifications-panel-instructions" tabIndex="-1">
            Specifications
            <i className="fa fa-question-circle" />
          </a>
        </div>

        <div className="panel-body panel-collapse collapse in" id="specification-panel-body">
          <div className="panel-body-container">
            <div id="specifications-panel-instructions" className="panel-instructions collapse" />

            <div className="row">
              <div className="col-xs-6">

                <PanelInputField 
                  label='Length'
                  value={ values.length }
                  onChange={ handleInputChange } 
                  formName='turbosquid_product_form_length'
                  fieldName='length'
                />
                <div className="form-field-error">{errors.length ? errors.length : "No Error"}</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const ProductSpecificationsMotionCapturePanel = withFormik({
  validationSchema,
  enableReinitialize: true,
  mapPropsToValues: (props) => (props),
  handleInputChange: (props) => (props.handleInputChange),
  handleSelectChange: (props) => (props.handleSelectChange),
})(SpecificationsForm)

export default ProductSpecificationsMotionCapturePanel

Форма работает правильно, она отображается и все, но я не могу заставить formik видеть ошибки. В этом примере у меня есть поле длины с целочисленными значениями. Всякий раз, когда я что-то ввожу, проверки работают (печатается console.log), но объект полностью пуст.

Даже если я пишу не числа на входе, ошибки не отображаются никогда.

У кого-нибудь есть предложения о том, что я мог бы сделать, чтобы это работало?

1 Ответ

0 голосов
/ 18 июня 2019

Вы установили начальные значения? Похоже, вы не в этом файле. Если нет, попробуйте настроить его и посмотреть, работает ли он.

...