如果使用Formik + Yup发生验证错误，如何在表单提交中调用方法？

Question

我正在研究使用Formik和Yup进行表单的本机应用程序。我想在提交表单时根据表单的值更新一个状态值。

问题说明：：

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

代码：：

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

  

如果我的地址为空，我想显示邮政编码输入文本字段。

您可以有2种情况：

1-检查地址错误，仅在地址无效的情况下显示邮政编码

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

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

2-首次提交后，如果地址无效，则始终显示zipCode

其他解决方案是使用validateForm函数将manually trigger validation与render一起使用。

例如

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

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