Как запустить валидацию в formik после рендеринга? - PullRequest
Новая
       14

Как запустить валидацию в formik после рендеринга?

1 голос
/ 09 октября 2019

У меня есть один вопрос с formik. По сути, у меня будет таблица, в которой перечислены все идентификаторы форм с ошибками. Когда пользователь нажимает на идентификатор формы, он показывает саму форму. Требование заключается в том, что ошибки должны отображаться также при визуализации формы. Кто-нибудь знает, как это сделать с Formik? Также, если пользователь редактирует поле, проверка поля должна работать как обычно.

Я поставил ссылку на коды и ящики здесь. https://codesandbox.io/s/pensive-brattain-yyls2. По сути, я хочу, чтобы при появлении формы я видел ошибки, а не только когда пользователь уходил с поля или менял его. Спасибо. 

import { Formik, Field, Form } from "formik";
import { TextField } from "formik-material-ui";

class Post0 extends React.Component {
   validateEmptyName(value) {
      if (!value) {
        return "Invalid Name";
      }
   }

 render() {
  return (
  <div>
    <Formik
      initialValues={{
        email: "",
        animal: ""
      }}
      onSubmit={values => {
        this.props.nextStep(values);
      }}
      render={({ values, isSubmitting }) => (
        <Form>
          <Field
            name="email"
            type="email"
            value={values.email}
            component={TextField}
            variant="outlined"
            validate={this.validateEmptyName}
          />
          <Field
            name="animal"
            value={values.animal}
            component={TextField}
            variant="outlined"
          />

          <button type="submit">Submit</button>
        </Form>
      )}
    />
  </div>
);

}}

1 Ответ

0 голосов
/ 09 октября 2019

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

const Input = ({ field, form }) => {
  useEffect(() => {
    form.validateForm();
  }, []);

  return (
    <div>
      <input
        style={{
          border: form.errors[field.name] ? "1px solid red" : "1px solid #ccc"
        }}
        name={field.name}
        value={field.value}
        onChange={field.onChange}
      />
      {form.errors[field.name] && (
        <span style={{ color: "red" }}>{form.errors[field.name]}</span>
      )}
    </div>
  );
};

И затем передайте это как component реквизит на вашем <Field/>.

Formik действительно обеспечивает isInitialValid реквизит, который вы можете установить на false на основном компоненте Formik, но опять же библиотека TextFields выВы используете не будет ничего отображать без touched проп.

...