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}...

當輸入值不是字符串時（例如，當我輸入數字時）仍然不會拋出任何錯誤。

我雖然可能是因為我正在將道具傳遞給表格？ 所以我把道具拿出來了。

我最后一次嘗試使用了驗證模式示例的精確復制和粘貼，並且在輸入數字時沒有拋出錯誤。

我錯過了什么簡單的事情？

謝謝

Answer 1

對於來自 Yup 的任何字符串驗證，它們接受字母數字值。 如果你只想要字母（例如名字），你會想要探索正則表達式。