I am working on react native application where using Formik and Yup for forms. I want to update one state value depending on the form's value while submitting a form.
Issue Description::
It works fine if there is no validation error, but there is one address field and depending on that field I have added a hidden field "zipcode". I want to show zipcode input text field if my address is empty.
Code::
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)
});
Inside render function::
<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>
);
}}
/>
I want to show zip code input with error when my address is empty on submission, means when there is a validation error in the form. How can I do this?