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

Share Improve this question Follow edited Dec 29, 2021 at 12:01 Sanaullah Javeid asked Dec 28, 2021 at 16:44 Sanaullah JaveidSanaullah Javeid 31711 gold badge22 silver badges1616 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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)