How can I reset the errors when the user start typing after submit in react hook form

Viewed 29

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>
);

}

0 Answers
Related