Formik + Yup表单字符串验证不适用于材料UI TextField +使用Formik或Formik组件

Question

我使用不同的方法创建了几个不同版本的Formik表单，试图使错误处理正常工作(具体地说，如果某些字段中的输入不是字符串，则拒绝这些输入)。很难理解为什么一个非字符串没有被选中并抛出一个错误...

这是我的第一次尝试，它使用Material UI TextField + useFormik

import { useFormik } from 'formik';
import * as yup from 'yup';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import { IAssetDTO } from '../types/types';

const validationSchema = yup.object({
    id: yup
        .string()
        .min(1, "Please enter id more than 1 character")
        .required("This field is required"),
    name: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    tags: yup
        .array()
        .nullable(),
    type: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    s3URL: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),
    thumbnailImageURL: yup
        .string()
        .min(1, "Please enter name more than 1 character")
        .required("This field is required"),

});



//create your own upload component 
export const EditAssetForm = (props:IAssetDTO) => {

    const formik = useFormik({
        initialValues: {
            id: props.id,
            name: props.name,
            tags: props.tags,
            type: props.type,
            s3URL: props.s3URL,
            thumbnailImageURL: props.thumbnailImageURL,
            createdAt:props.createdAt,
            updatedAt:props.createdAt

        },
        validationSchema: validationSchema,
        onSubmit: (values) => {
            
            console.log("logging values" +JSON.stringify(values))
    
            alert(JSON.stringify(values, null, 2));
        },
    });

    return (
        <div>
           
            <form onSubmit={formik.handleSubmit}>
                <TextField
                    fullWidth
                    id="id"
                    name="id"
                    label="ID"
                    value={formik.values.id}
                    onChange={formik.handleChange}
                    error={formik.touched.id && Boolean(formik.errors.id)}
                    helperText={formik.touched.id && formik.errors.id}
                />...

一切都渲染得很好，并且会抛出适当的错误，以便最大限度地减少字符，并且是必需的。但是如果我输入一个字符串，就不会抛出错误。

这是我的第二次尝试，我将组件更改为使用带模式验证的Formik、Form和Field

import { Formik, Form, Field } from 'formik';
 import * as Yup from 'yup';
 import { IAssetDTO } from '../types/types';
 
 const ValidationSchema = Yup.object().shape({
    id: Yup
    .string()
    .min(25, "Please enter id more than 25 character")
    .required("This field is required"),
name: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
tags: Yup
    .array()
    .nullable(),
type: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
s3URL: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
thumbnailImageURL: Yup
    .string()
    .min(1, "Please enter name more than 1 character")
    .required("This field is required"),
 });
 
 export const NewEditAssetForm = (props:IAssetDTO) => (
   <div>
     <h1>Signup</h1>
     <Formik
       initialValues={{
        id: props.id,
        name: props.name,
        tags: props.tags,
        type: props.type,
        s3URL: props.s3URL,
        thumbnailImageURL: props.thumbnailImageURL,
        createdAt:props.createdAt,
        updatedAt:props.createdAt

    }}
       validationSchema={ValidationSchema}
       onSubmit={values => {
       console.log("logging values" +JSON.stringify(values))
    
        alert(JSON.stringify(values, null, 2));
       }}
     >
       {({ errors, touched }) => (
         <Form>
           <Field name="id" />
           {errors.id && touched.id ? (
             <div>{errors.id}</div>
           ) : null}...

当输入值不是字符串时(例如，当我输入一个数字时)，仍然不会抛出错误。

我想这可能是因为我在向窗体传递道具？所以我把道具拿出来了。

我的上一次尝试使用的是validation schema example的精确复制和粘贴，并且当输入是数字时不会抛出错误。

我错过了什么简单的东西？

谢谢

Answer 1

对于来自Yup的任何字符串验证，它们都接受字母数字值。如果只想要字母(例如一个名字)，那么可以探索正则表达式。