Formik在React中不显示错误

问题描述

我正在尝试让验证错误显示在触摸屏上，但是由于某些原因它们没有显示出来。我尝试按照Formik官方网站上的指南进行操作，但无济于事。我正在使用React-Bootstrap，Formik和Yup进行验证。我在做什么错了？

进口：

import * as React from 'react';
import { Container,Row,Col,Form } from 'react-bootstrap';
import { Formik } from 'formik';
import * as yup from 'yup';

验证模式：

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3,'Minimum 3 characters allowed')
    .max(100,'Maximum 100 characters allowed'),});

表格：

<Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',}}
    onSubmit={() => {}}
>
    {({ errors,touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Form.Control type='text' name='companyName' placeholder='Enter Company Name' />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>

解决方法

似乎您的输入字段未连接到Formik。 您可以使用Formik中的Field将输入连接到Formik。

import * as React from 'react';
import { Container,Row,Col,Form } from 'react-bootstrap';
import { Formik,Field } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3,'Minimum 3 characters allowed')
    .max(100,'Maximum 100 characters allowed'),});

export default function App() {
  return (
    <Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',}}
    onSubmit={() => {}}
>
    {({ errors,touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Field type='text' placeholder='Enter Company Name' name="companyName" />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>
  );
}