Проверка значений объекта Redux Form Wizard - PullRequest
Новая
       39

Проверка значений объекта Redux Form Wizard

0 голосов
/ 17 декабря 2018

В форме Redux у меня возникают проблемы с отображением сообщений об ошибках в форме мастера со значениями объекта.В первом вопросе для мастера у меня есть строка объекта, показанная ниже в коде, где name = "survey [age]" в файле WizardFormQuestion1.js.

Код ручки здесь для полного кода .

WizardFormQuestion1.js 

import React from "react";
import { Field, reduxForm } from "redux-form";
import validate from "./validate";

const renderField = ({
  input,
  label,
  survey,
  type,
  meta: { touched, error }
}) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} name={input.name} placeholder={label} type={type} />
      {touched && error && <span>{error}</span>}
    </div>
  </div>
);

const WizardFormFirstPage = props => {
  const { handleSubmit } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="survey[age]"
        type="text"
        component={renderField}
        label="Age"
      />
      <div>
        <button type="submit" className="next">
          Next
        </button>
      </div>
    </form>
  );
};

export default reduxForm({
  form: "wizard", //                 <------ same form name
  destroyOnUnmount: false, //        <------ preserve form data
  forceUnregisterOnUnmount: true, // <------ unregister fields on unmount
  validate
})(WizardFormFirstPage);

В validate.js я пробовал несколько вещей, но не смог проверить строку объекта.Я думаю, что объект ошибки выглядит как

error.survey = {'age': 'Required'};

Я получаю сообщение об ошибке JavaScript «возраст не определен», или сообщение об ошибке проверки не отображается, когда я использую либо точечную, либо скобочную запись.

validate.js 

const validate = values => {
  const errors = {};

  values = {
    survey: { age: undefined }
  };


  if (!values.survey["age"]) {
    errors.survey = { age: "Required" };
  }

  return errors;
};

export default validate;

Я просмотрел другие ссылки, но не смог легко найти правильный ответ на эту проблему.Какие-либо предложения?Спасибо.

1 Ответ

0 голосов
/ 18 декабря 2018

Хорошо, я решил это, добавив пустые объекты для ошибок и значений.Это может быть не самым элегантным, но это работает.

Вот решение в validate.js. 

const validate = values => {
  const errors = { survey: {} };
  const { survey = {} } = values;
  const { age } = survey;

  if (!age) {
    errors.survey.age = "Age is required!";
  }

  return errors;
};

export default validate;
...