Formik + Yup 表单字符串验证不适用于 Material UI TextField +useFormik 或 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 的任何字符串验证，它们都接受字母数字值。如果您只想要字母（例如名称），您可能会想探索正则表达式。