Formik |Как использовать несколько схем проверки и визуализировать разделенные виды для формы - PullRequest
Новая
       10

Formik |Как использовать несколько схем проверки и визуализировать разделенные виды для формы

0 голосов
/ 28 марта 2019

Я понимаю, что это может быть неординарный вопрос или даже 2 в одном, но, пожалуйста, поверьте мне, когда я говорю, что на этот вопрос 2 нельзя ответить отдельно.Пожалуйста, имейте это в виду.Спасибо за ваше время ..

Мой вопрос вращается вокруг определенного сценария, с которым я сейчас сталкиваюсь.Я использую withFormik HOC вместе с Yup для обработки различных случаев в моих формах, таких как отправка, errorHandling и некоторые другие в зависимости от ситуации.

Обычно моя ситуация с формой включает создание иРежим редактирования.

onCreate => Передайте значения по умолчанию и вызовите метод POST из моих служб.

onEdit => Заполните значения с помощьютекущие значения элементов с сервера и вызов метода PUT из сервисов.

Пример 

  const validationSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const EnchancedCreateUserForm = withFormik({
    mapPropsToValues: ({
      user = {
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
      }
    }) => ({ ...user }),

    validationSchema,

    handleSubmit: (values, { props, setSubmitting }) => {
      const { doSubmit, onSave, inEditMode } = props;

      const saveUser = inEditMode ? updateUser : createUser;
      return doSubmit(saveUser, values)
        .then(() => {
          setSubmitting(false);
          onSave();
        })
        .catch(() => {
          setSubmitting(false);
        });
    },

    displayName: 'AddEditUser'
  })(AddEditUser);

Это на самом деле прекрасно работает для меня, поскольку моя форма создания и редактирования - этотак же.И здесь лежат мои 2 проблемы.

Текущая ситуация Моя текущая реализация формы имеет 2 представления.Один унифицированный на Create с этими 4 полями, и на Edit, у меня есть 2 формы.Один для passwordChange и один для infoChange.Это заставляет меня столкнуться со следующими проблемами.

Мне понадобятся 3 FormValidationSchemas (CREATE, EDIT-INFO, EDIT-PASSWORD).Который я не уверен, формик даже поддерживает.Как именно, я должен обрабатывать остальную часть функциональности, onSubmit, ErrorMessage для поля error и statusError?Если бы вы могли действительно помочь мне найти способ атаки, это было бы здорово.

Я прочитал, что validationSchema может быть передана функция, которая возвращает validationSchema, поэтому я сделал это, но она не работает: 

  const validationFullSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
    password: Yup.string('Provide a Password').required('Password is required'),
    confirmPassword: Yup.string('Provide your password again')
      .required('Password Confirmation is Required')
      .oneOf([Yup.ref('password')], 'Passwords do not match'),
  });

  const validationEditSchema = Yup.object().shape({
    username: Yup.string('Provide a Username').required('Username is Required'),
    email: Yup.string().email('Provide a Valid email Address'),
  });

 const validationSchemaFn = () => {
     If ( efitMode ) {
       return validationCreateSchema

} return validationEditSchema} 

  validationSchema: validationSchemaFn(),
  // Which throws an error
  // Failed to load app. Error: Cannot read property 'props' of undefined

Возможно, я что-то не так делаю, но я на всякий случай высказался здесь.

Мое мнение по этому вопросу

  • Создайте 2 компонента формы (PasswordFormComponent, InfoFormComponent) и оберните каждый из них HOC, предоставляя им независимый доступ к withFormik.
  • Для CreateForm преобразуйте его в компонент контейнера, который визуализируетоба этих компонента
  • Для редактирования вместо вызова всей формы, которая в настоящее время происходит, вызовите для каждой ситуации определенный компонент.

Что вы думаете о моем предложенном решении?Если вам это нравится, не могли бы вы сделать это лучше или помочь с некоторыми примерами кода, особенно в нескольких validationSchemas выпусках.Спасибо !!

...