I'm using react native, in the first submit, if there's an error, I want to show it, but when the user start typing again I want to hide the error message, i've try everything and nothing works, please help me, this is my code:
export default function Register({navigation}: any) {
const {
control,
handleSubmit,
formState: {errors, isDirty, isValid},
} = useForm({defaultValues: {email: ''}});
const onSubmit = (data: object) => {
console.log(data);
// navigation.navigate('NameAndPass');
};
console.log(errors);
return (
<Container>
<UserImage
source={{
uri: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.shareicon.net%2Fdata%2F2015%2F09%2F09%2F98455_man_512x512.png&f=1&nofb=1',
}}
/>
<InputContainer>
<InputAuth
placeholder="Email"
style={{
marginTop: 40,
marginBottom: 0,
}}
control={control}
name="email"
rules={{
required: true,
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
message: 'El email debe ser válido',
},
}}
/>
{errors.email && (
<ErrorMessage>{errors.email.message}</ErrorMessage>
)}
<ErrorMessage>{JSON.stringify(isValid)}</ErrorMessage>
</InputContainer>
<Button
onPress={handleSubmit(onSubmit)}
disabled={!isDirty}
isDirty={isDirty}>
<ButtonText>Next</ButtonText>
</Button>
<BottomAuth
navigation={navigation}
navigateTo="Login"
text="Already have an account?"
touchableText="Log in."
/>
</Container>
);
}