如果使用 Formik + Yup 出现验证错误，如何在表单提交时调用方法？

Question

我正在开发使用 Formik 和 Yup 作为表单的 React Native 应用程序。我想在提交表单时根据表单的值更新一个状态值。

问题描述::

如果没有验证错误，它工作正常，但有一个地址字段，根据该字段，我添加了一个隐藏字段 "zipcode"。如果我的地址为空，我想显示邮政编码输入文本字段。

代码::

const validationSchema = Yup.object().shape({
    address: Yup.string()
        .required('Address should not be empty'),
    zipcode: Yup.string()
        .required(errMgs.emptyText)
        .matches(regExp, errMgs.specialCharNotAllowed),
    apt: Yup.string()
        .matches(regExp, errMgs.specialCharNotAllowed)
});

内部渲染函数::

<Formik
    initialValues={this.initialValues}
    onSubmit={(data) => this.onSubmitForm(data)}
    ref={el => (this.form = el)}
    validationSchema={validationSchema}
    render={({ handleSubmit, values, setValues, setFieldValue, errors, touched, ...props }) => {
        return (
            <Form>
                <GooglePlacesInput
                    onPress={(data, detail) => this.onPressOfAddress(data, detail)}
                    address={values.address}
                    name="address"
                    onChangeText={(value) => setFieldValue('address', value)}
                />
                {errors.address && touched.address && <ErrorText message={errors.address} />}
                {isZipCode &&
                    <>
                        <TextInput placeholder="Zipcode" textContentType="postalCode" name="zipcode" type="text" onValueChange={(value) => this.onChangeZipcode(value)} />
                        {errors.zipcode && touched.zipcode && <ErrorText message={errors.address} />}
                    </>
                }
                <TextInput placeholder="apt" textContentType="streetAddressLine1" name="apt" type="text" onValueChange={(value) => setFieldValue('apt', value)} />
                <Button onPress={handleSubmit} block large variant="success">SAVE</Button>
                <Button onPress={() => popScreen(this.props.componentId)} block large variant="danger">CANCEL</Button>
            </Form>
        );
    }}
/>

我想在提交时我的地址为空时显示错误的邮政编码输入，这意味着当表单中存在验证错误时。我该怎么做？

Answer 1

I want to show zipcode input text field if my address is empty.

您可以有 2 个案例：

1 - 检查地址错误，仅在地址无效时显示邮政编码

为此，您应该得到地址字段的错误。

您应该 {errors.address && touched.address && (...)} 而不是 {isZipCode && (...)}，这是当地址字段为空时。

2 - 第一次提交后，如果地址无效，总是显示 zipCode

其他解决方案是 manually trigger validation 和 validateForm 将来自 render 函数。

例如

<button type="button" onClick={() => validateForm().then(() => {
    console.log('Check for errors and Update State of isZipCode')
 })}>
    Submit Button
</button>

您也可以使用 validateField('fieldName') 仅验证一个字段，因此可能只检查 address 并根据错误设置状态。

如果使用 Formik + Yup 出现验证错误，如何在表单提交时调用方法？

How to call a method on form submission if there is a validation error using Formik + Yup?

react-native

yup

formik

1 - 检查地址错误，仅在地址无效时显示邮政编码

2 - 第一次提交后，如果地址无效，总是显示 zipCode