Как динамически получить доступ к вложенным ошибкам / прикоснулся к Formik Field - PullRequest
Новая
       20

Как динамически получить доступ к вложенным ошибкам / прикоснулся к Formik Field

0 голосов
/ 11 мая 2019

Я пытаюсь создать компонент React, чтобы абстрагироваться от создания группы ввода для моей формы.Все входы имеют одинаковую разметку - метку, с входом внизу, и если присутствует текст ошибки / информации, они отображаются под входом.

Ранее я обрабатывал свое собственное состояние / обработчики формы.Сейчас я экспериментирую с formik (с проверкой Yup) и столкнулся с проблемой динамического доступа к полям error и touched, когда у меня есть вложенная информация.

Вот мой компонент входной группы: 

import React from 'react';
import { FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
import { Field, ErrorMessage } from 'formik';

const InputGroup = ({ name, label, type, info, required }) => {
  return (
    <FormGroup>
      <Label htmlFor={name}>{label}{required && '*'}</Label>
      <Field name={name}>
        {({field, form}) => (
          <Input {...field} id={name} type={
                 invalid={form.errors[name] && form.touched[name]} //problem here
          />
        )}
      </Field>
      {info && <FormText color="muted">{info}</FormText>}
      <ErrorMessage name={name}>
          {msg => <FormFeedback>{msg}</FormFeedback>}
      </ErrorMessage>
    </FormGroup>
  )
}

InputGroup.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
  type: PropTypes.string,
  info: PropTypes.string,
  required: PropTypes.bool
};

InputGroup.defaultProps = {
  type: 'text',
  required: false
};

Поскольку я использую начальную загрузку (reactstrap@7.x), элемент <FormFeedback> требует, чтобы сопровождающий <Input> был помечен тегом invalid.Выше я динамически присваиваю invalid=true/false, если существует соответствующее поле объекта form.errors от formik (т. Е. Существует ошибка) и объект form.touched имеет значение true (т. Е. Пользователь коснулся ввода).

Это прекрасно работает, когда formik настроен с плоскими начальными значениями (например, ниже), так как invalid={form.errors[name] && form.touched[name]} оценивает (например,) invalid={form.errors[firstName] && form.touched[firstName]}

initialValues = {
  firstName: '',
  lastName: '',
  email: '',
  password: ''
}

Однако, когда formik настроен свложенные начальные значения (например, ниже), invalid={form.errors[name] && form.touched[name]} оценивается как invalid={form.errors[name.first] && form.touched[name.first]}.В конечном счете, это всегда будет иметь значение false, следовательно, ввод всегда равен invalid=false, поэтому ввод никогда не помечается ни стилем ошибок, ни отображаемым сообщением об ошибке. 

initialValues = {
  name: {
    first: '',
    last: ''
  },
  email: '',
  password: ''
}

Как я могу настроить мойКомпонент InputGroup, чтобы я мог динамически получать доступ к обязательным полям при ошибке formik и к объектам независимо от того, является ли он плоским или вложенным?

1 Ответ

1 голос
/ 12 мая 2019

Formik имеет функцию getIn(), которая может извлекать значение из объекта по пути (например, путь, являющийся чем-то вроде name.first). 

<Field name={name}>
  {({ field, form }) => (
    <Input
      {...field}
      id={name}
      invalid={getIn(form.errors, name) && getIn(form.touched, name)}
    />
  )}
</Field>

См. пример здесь на CodeSandbox.

...