当字段填充了状态值并想要编辑该字段时，我们如何使用formik验证表单

Question

这是代码，但我想知道的是如何验证即将填充状态值的表单，我知道如何验证初始值，但无法理解。

这是这里的状态CurrentUserDetails是来自列表API的对象：

const [firstName, setFirstName] = useState(currentUserDetails.first_name);

这是验证模式：

const validationSchema = Yup.object().shape({
first_name: Yup.string()
// .matches(/^[A-Za-z ]*$/, "Please enter valid name.")
// .max(40, "First Name must be at most 40 characters.")
.required("First Name is required."),
});

这是我想要发送到API的数据，放入API以更新现有数据。数据正在正确更新，但无法验证数据。

const data = {
first_name: firstName,

};

我用来更新First Name字段的字段：

<Field
onChange={(e) => {
setFirstName(e.target.value);
}}
as={TextField}
value={firstName || ""}
label="First Name"
name="first_name"
placeholder="Enter First Name"
fullWidth`enter code here`
size="small"
error={props.errors.first_name && props.touched.first_name}
helperText={<ErrorMessage name="first_name" />}
required

/>

请帮助解决我在项目中遇到的问题

Answer 1

如果我理解正确，您只想在字段值发生更改时验证字段值。正确的您不想在字段中显示已存档值的错误消息吗？

在Formik初始化对象中，使用从API端点获得的值设置初始值。按以下方式尝试。

const formik: any = useFormik({
initialValues: {
first_name: firstName
},
validate: values => {
const errrors = {};
if (!values.firstname) {
errors.firstNameErr = "Please Enter First name"
}
}
)}

在您的表单字段中。更改如下。

<form onSubmit={formik.handleSubmit}>
<Field
onChange={formik.handleChange}
value={firstName || ""}
id="firstname"
...
/>
{formik.errors.firstNameErr}
</form>