You can set a additional boolean key where value is default false. Change it to true when you modify the value in step 1. And then if the value is true for that key then apply the validation.
Something like this.
const initialSchema= {
name: '',
isEmail: false, // change this when you want to add validation
email: '',
phone: '',
};
const validationSchema = Yup.object().shape({
name: Yup.string()
.required('Enter Name')
isEmail: Yup.boolean(),
email: Yup.string().when('isEmail', {
is: true,
then: Yup.string()
.required('Enter Email ID'),
otherwise: Yup.string(),
}),
phone: Yup.string()
.required('Enter Mobile No'),
});
Here is the documentation reference for same.
Update:
Here is the working codesandbox. I've added checkbox with display:none;
, and added the default state values in data context.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…