Как я могу вложить этот объект в другой с помощью проверки React / Formik и Yup?

Я пытаюсь узнать, как использовать Formik и Yup для проверки поля формы ввода (текста). Я последовал стандартному подходу Джареда Палмера, и он отлично сработал прямо из коробки.

Когда дело доходит до чего-то, что немного больше зависит от компонентов, мне трудно достичь того же уровня оценки, и я просто не могу понять, в чем я ошибаюсь?

Ага, похоже, не может идентифицировать мою модель формы и не проверяет поле ввода должным образом ...

Я думаю, что я действительно испортил исходные значения или я не представляю их в той форме, которую вы ищете, но любая помощь здесь была бы потрясающей, это сводит с ума ...

У меня есть пример запущенной тестовой среды ››

https://codesandbox.io/s/building-multi-step-form-with-formik-yup-vjzpk

Модель формы (компоненты / CheckoutPage / FormModel / checkoutFormModel.js):

export default {
  formId: "checkoutForm",
  formField: {
    nestedObj: {
      firstName: {
        name: "firstName",
        label: "First name*",
        requiredErrorMsg: "First name is required"
      }
    }
  }
};

Начальные значения (компоненты / CheckoutPage / FormModel / initialValues.js):

import checkoutFormModel from "./checkoutFormModel";
const {
  formField: {
    nestedObj: { firstName }
  }
} = checkoutFormModel;

export default {
  nestedObj: {
    [firstName.name]: ""
  }
};

Да схема проверки (компоненты / CheckoutPage / FormModel / validationSchema.js):

import * as Yup from "yup";
import checkoutFormModel from "./checkoutFormModel";
const {
  formField: {
    nestedObj: { firstName }
  }
} = checkoutFormModel;

export default [
  Yup.object().shape({
    nestedObj: Yup.object().shape({
      [firstName.name]: Yup.string().required(`${firstName.requiredErrorMsg}`)
    })
  })
];

Адресная форма, которая объединяет Yup и Formik (components / CheckoutPage / Forms / AddressForm.js):

import React from "react";
import { Grid } from "@material-ui/core";
import { InputField } from "../../FormFields";

export default function AddressForm(props) {
  const {
    formField: {
      nestedObj: { firstName }
    }
  } = props;
  return (
    <React.Fragment>
      <Grid container spacing={3}>
        <Grid item xs={12} sm={6}>
          <InputField name={firstName.name} label={firstName.label} fullWidth />
        </Grid>
      </Grid>
    </React.Fragment>
  );
}

reactjs javascript formik yup formik-material-ui
person Steve Harvey    schedule 24.06.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что происходит, когда ваша проверка yup проверит такой объект, как

{
    nestedObj: {
        [firstName.name]: '' // Validation will get here
    }
}

Но когда вы перейдете к своему вводу name={firstName.name}, ваш ввод будет похож на

{
    [firstName.name]: ''
}

Таким образом, вам не хватает проверки, потому что вы добавили nestedObj в проверке yup

OR

Вы забыли добавить nestedObj к firstName.name.

Итак, что вы можете сделать, это изменить схему проверки на

Yup.object().shape({
  [firstName.name]: Yup.string().required(`${firstName.requiredErrorMsg}`)
})

OR

Перейти на вход, имя nestedObj

<InputField name={`nestedObj.${firstName.name}`} label={firstName.label} fullWidth />

Вы можете передать его как опору или просто строку жесткого кода, по вашему выбору.

person Vencovsky    schedule 24.06.2020
comment
Спасибо Спасибо! Вы абсолютно правы, я не передавал nestedObj в Yup, поэтому он не смог бы его увидеть. Ваше решение: ‹InputField name = {_ 1_} label = {firstName.label} fullWidth /› сработало сразу, я не могу вас отблагодарить. Это сводило меня с ума, я был слишком близко к прототипу, чтобы увидеть ошибку. - person Steve Harvey; 24.06.2020