asyncValidate doesn't allow objects for errors

[mlarcher]

With the validate function we can return Objects with error name and parameters, which come in very handy for error reporting. However, if we do the same from an asyncValidatefunction, the object gets lost in the way and the error doesn't appear at all on the field object.
Is this a bug or is it intentional ?

[erikras]

Sounds like a bug. Can you give an example of a value returned from asyncValidate that fails in this way?

[mlarcher]

I have the problem with the following object as error:

return {
  name: "SOME_ERROR_CONSTANT"
};

if I just use

return "SOME_ERROR_CONSTANT";

instead, I get the expected error.

[erikras]

That's very odd. Have another look at the example, and see if you can notice anything you're doing differently.

[mlarcher]

I had hard time figuring out what was going wrong, and got to the example many times. In the end, I only had something like this:

export default reduxForm({
  form: 'myForm',
  fields: ['username'],
  asyncValidate: (values/*, dispatch */) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        reject({username: {
            name: 'SOME_ERROR_CONSTANT'
        }
        });
    }, 100);
  });,
  asyncBlurFields: ['username']
})(MyComponent);

which was ignoring the error, while

export default reduxForm({
  form: 'myForm',
  fields: ['username'],
  asyncValidate: (values/*, dispatch */) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        reject({username:  'SOME_ERROR_CONSTANT'
        });
    }, 100);
  });,
  asyncBlurFields: ['username']
})(MyComponent);

was displaying it.

I tried to follow the calls in the lib, going from asyncValidation.js _isValid2 to isValid, which seemed like an odd function to apply to an error output (as opposed to a field or field value). I didn't figure out whaat was going on in there with the recursive calls and stopped my investigation there.

[erikras]

What is this name key for? Your data looks like this:

{
  username: 'mlarcher'
}

So your error needs the same shape:

{
  username: 'invalid for some reason'
}

If you give an error like:

{
  username: {
    name: 'some error'
  }
}

...redux-form is going to assume that your data looks like:

{
  username: {
    name: 'mlarcher'
  }
}

Perhaps redux-form should be smarter, and look at your fields array to see the shape of your data and accept objects as errors, but, at the moment, it does not.

Does all that make sense?

[mlarcher]

I understand. I implemented the synchronous validation first and didn't face this problem, so I was a bit surprised when it arose during async validation implementation.
A string is not enough for us as an error content, as we need to be able to pass params along with the error key for better error reporting. Here I dont use the data, but the error object could be something like this:

{
    name: 'SOME_ERROR_CONSTANT',
    code: 'the server http error code',
    params: { count: 'some value we want to display in the error report' }
}

What approach would you recommend to end up with an object as the error content ?

[erikras]

Ah. This is a bug, then. Async and submit errors are saved in the state, but sync errors are not, so there must be some inconsistency there. Investigating... 🔍

[erikras]

Fix published in v4.1.1.

Thanks for this.

[mlarcher]

Great! Thanks for the quick fix :)

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.