Использование имен вложенных объектов в formik / - PullRequest
Новая
       79

Использование имен вложенных объектов в formik /

0 голосов
/ 30 мая 2020

В документации Formik указано, что вы можете использовать путь точки типа loda sh для имени / доступа к вложенным объектам (например, name.firstName). Это также должно применяться к встроенному компоненту <ErrorMessage/>. Я работал с учебным приложением React-Typescript, которое использует formik для ввода формы, и казалось, что оно нормально работает под капотом в сочетании с внутренним кодом, но я заметил, что поля, которые передавали значения вложенных объектов, не вызывали никаких ошибок в UI. Сама ошибка будет сгенерирована, но компонент <ErrorMessage/>, похоже, не хотел отображать.

Урезанная версия приложения находится ниже. Ошибка «Поле обязательно» должна выдаваться, если вы выходите из поля формы без допустимого ввода, но опять же это не работает для полей вложенных объектов (имя / фамилия). Мне было интересно, сталкивался ли кто-нибудь еще с этой проблемой. Это немного раздражает.

1007 * Я видел, что Formik, кажется, в паре часто с Япом для проверки, что может сделать эту проблему спорное, но я не получил совсем, что еще далеко. Спасибо! 
import React from 'react';
import ReactDOM from 'react-dom';

import { ErrorMessage, Field, FieldProps, Formik } from "formik";
import { Form, Button } from "semantic-ui-react";

interface TextProps extends FieldProps {
  label: string;
  placeholder: string;
}

const TextField: React.FC<TextProps> = ({
  field, label, placeholder
}) => (
  <Form.Field>
    <label>{label}</label>
    <Field placeholder={placeholder} {...field} />
    <div style={{ color: "red" }}>
      <ErrorMessage name={field.name} />
    </div>
  </Form.Field>
);

const App: React.FC = () => {

  return (
    <Formik 
    initialValues={{
      name: {
        firstName: "",
        lastName: ""
      },
      job: "",
    }}
    onSubmit={()=>console.log("submitted")}

    validate={values => {
      const requiredError = "Field is required";
      const errors: { [field: string]: string } = {};
      if (!values.name.firstName) {
        errors["name.firstName"] = requiredError;
      }
      if (!values.name.lastName) {
        errors["name.lastName"] = requiredError;
      }
      if (!values.job) {
        errors["job"] = requiredError;
      }
      return errors;
    }}
    >
    {({ isValid, dirty}) => {
      return (
      <Form>
        <Field label="First Name" name="name.firstName" component={TextField} />
        <Field label="Last Name" name="name.lastName" component={TextField} />
        <Field label="Job" name="job" component={TextField} />

        <Button type="submit" disabled={!dirty || !isValid}> Add</Button>
      </Form>
      );
    }}
    </Formik>
  );
};
...