I'm using formik in my React Native App like this: In constructor this.myRef = React.createRef();

Creating my form ponent is like this

<AppForm
    innerRef={this.myRef}
    initialValues={{ currentPassword: '', newPassword: '', confirmPassword: '' }}
    validationSchema={validationSchema}
    onSubmit={() => ''}
    >

    <AppFormField
        heading='Current Password'
        name='currentPassword'
        autoCapitalize='none'
        secureTextEntry={!showCurrentPassword}
        icon={showCurrentPassword ? 'eye' : 'eye-off'}
        onIconClick={() => this.setState({ showCurrentPassword: !showCurrentPassword })}
    />
    
</AppForm>

Where AppForm is my custom formik form ponent and AppFormField is a custom ponent.

(I'm using ref bcz I'm submitting the form using Save button outside the form ponent)

Calling handle submit like this onBtnPress={() => this.handleSubmit()}

And finally the handleSubmit function where I want to set the error.

handleSubmit = async () => {

    this.myRef.current?.submitForm();
    this.myRef.current.setErrors({currentPassword: 'Hello'});
    this.myRef.current.setFieldError('currentPassword', 'Hello'); // I've tried both ways
    console.log('CurrentRef ', this.myRef.current);
}

I've tried both setErrors and setFieldError and expecting the formik to set the error "Hello" to the field 'currentPassword' but I'm unable to do so. Please tell me the mistake if any and tell me the correct way.

Thanks!

I'm using formik in my React Native App like this: In constructor this.myRef = React.createRef();

Creating my form ponent is like this

<AppForm
    innerRef={this.myRef}
    initialValues={{ currentPassword: '', newPassword: '', confirmPassword: '' }}
    validationSchema={validationSchema}
    onSubmit={() => ''}
    >

    <AppFormField
        heading='Current Password'
        name='currentPassword'
        autoCapitalize='none'
        secureTextEntry={!showCurrentPassword}
        icon={showCurrentPassword ? 'eye' : 'eye-off'}
        onIconClick={() => this.setState({ showCurrentPassword: !showCurrentPassword })}
    />
    
</AppForm>

Where AppForm is my custom formik form ponent and AppFormField is a custom ponent.

(I'm using ref bcz I'm submitting the form using Save button outside the form ponent)

Calling handle submit like this onBtnPress={() => this.handleSubmit()}

And finally the handleSubmit function where I want to set the error.

handleSubmit = async () => {

    this.myRef.current?.submitForm();
    this.myRef.current.setErrors({currentPassword: 'Hello'});
    this.myRef.current.setFieldError('currentPassword', 'Hello'); // I've tried both ways
    console.log('CurrentRef ', this.myRef.current);
}

I've tried both setErrors and setFieldError and expecting the formik to set the error "Hello" to the field 'currentPassword' but I'm unable to do so. Please tell me the mistake if any and tell me the correct way.

Thanks!

• javascript
• reactjs
• react-native
• validation
• formik

2 Answers 2

Actually the problem was with the way I was calling the method. setFieldError and setErrors both are async and I was calling them without the await.

A.You need to add errors in your Formik ponent

B. you use setFieldError caller setFieldError("currentPassword", "Hello")(info)