Автоматически очищать значения в Formik без ошибки проверки - PullRequest
Новая
       13

Автоматически очищать значения в Formik без ошибки проверки

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

Formik рекомендует использовать Yup для проверки данных, поэтому базовая форма выглядит следующим образом: 

import React from 'react';
import { Formik, Form, Field } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Required'),
});

export const ValidationSchemaExample = () => (
  <div>
    <h1>Signup</h1>
    <Formik
      initialValues={{
        firstName: '',
        lastName: '',
        email: '',
      }}
      validationSchema={SignupSchema}
      onSubmit={values => {
        // same shape as initial values
        console.log(values);
      }}
    >
      {({ errors, touched }) => (
        <Form>
          <Field name="firstName" />
          {errors.firstName && touched.firstName ? (
            <div>{errors.firstName}</div>
          ) : null}
          <Field name="lastName" />
          {errors.lastName && touched.lastName ? (
            <div>{errors.lastName}</div>
          ) : null}
          <Field name="email" type="email" />
          {errors.email && touched.email ? <div>{errors.email}</div> : null}
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  </div>
);

Вместо этого мне нужен способ очистки данных без отображения ошибки проверки.

Например, числовое поле, которое может быть числом от 1 до 10. Если пользователь вводит 20 - оно должно автоматически измениться на 10 (без ошибок проверки).

Есть ли способ настроить Yup или Formik, чтобы значения форм обновлялись автоматически?

...