Validation of array fields

[nosovsh]

I have a field with list of phones. User can add them, remove and edit. There two possible types of errors here:

1. Errors in array itself. For example: "You should provide at least one phone".
2. Errors in one particular element: "Invalid phone".
   If I need first type of errors, I should define form fields like this ['phones'] and from my validation function I should return {phones: "You should provide at least one phone"}
   If I need second type of errors, I should define fields like ['phones[]'] and should return

{
  phones: [
    undefined, // first phone is OK
    "Invalid phone" //second phone is bad
  ]
}

from my validation function.

The problem is that it is impossible to use both types of errors on the same fields. But it is quite common use case.
Any ideas how to solves this?

[erikras]

You have correctly identified the situation.

It's a little hacky, but you could put the "Need at least one phone" error in the form-wide _error key.

No obvious solution is coming to me... 💭

[nosovsh]

What about adding special _error field to arrays? Something like:

var errors ={}
errors.phones: [
    undefined, // first phone is OK
    "Invalid phone" //second phone is bad
  ]
errors.phones._error = "You should provide at least one phone"

btw it would be nice to have this _errors for nested objects too.

[nosovsh]

If you like it I think I can implement this

[slybridges]

@trashgenerator @erikras I like this proposition as well 👍

That could be applied both to arrays and deep objects in the same way.

What could be even better is that, if a validation (including submitValidation and asyncValidation) returns only a string where the form expects an object or array (e.g. errors.phones = "You should provide at least one phone"), this error would also automatically be added to errors.phones._error attribute.
That would make integration with APIs that return global errors for arrays or objects much easier.

[ooflorent]

Any update on this one? If think @trashgenerator solution in the best deal here...

[mdgbayly]

Also interested in a solution for this one. I'd be interested if you have ideas on how to clear the errors from the array object.

We have a similar example to above where we have an array of weights. Each weight must be numeric and at least one must be 100.

var errors ={}
errors.weights: [
    undefined, // first weight is OK
    "Must be numeric" //second weight is bad
  ]
errors.weights._error = "At least one weight must be 100"

So I'm assuming that when your component gets the weights array field, the array field will have an error property alongside the standard array properties like addField etc.

If the issue was that the array was empty you could potentially clear the array error when an array field method like addField is called. But not so clear if the issue is that no error fields meet a particular rule like, at least one must be 100. I guess you could chain up the onChange handlers or something and always clear the array error when any child changes?

[mdgbayly]

I started having a go at implementing something for this. But ran into some confusion with the way that setErrors.js works currently. I tried adding in an

errors.weights.error = "at least one weight must be 100"

error and handling that in some of the array error handling logic but the error property I set seemed to get cut out at some point. Much debugging and I really just could not grok how setErrors is supposed to work. I was testing setting a simple error on a fairly simple form structure and it seemed like the line that set the [destKey] error property got called about four times. I found it a bit confusing how there are multiple iterations going on in the clear and main part of the function.

So I decided to have a go at rewriting setErrors so maybe I could understand it better.
My first thought was that it should be possible to set and clear errors in a single iteration of the errors/state object structure. Started off simple, but once I added in all the different array handling it started to look a lot less simple but to my 'procedural' brain I still find it easier to understand than the current implementation...(most likely 'cos I wrote this version!), and it generally only does a single pass through the data rather than the multiple passes I was seeing with the current implementation.
I also find some of the inconsistent handling of array/object errors (usually picks the first array error whereas an object as error is OK?) a bit confusing but I think I remember seeing another issue discussing that (#639).

Anyway, not sure what the point of this post is but just thought I'd share what I spent some of my weekend on...certainly not intended as a judgement on the current implementation...!

https://gist.github.com/mdgbayly/2090df04cc6062759860

Maybe now that I have a version of setErrors that I understand I could have a go at adding validation of array fields and then maybe retrofit to the current setErrors implementation...

[muuki88]

@erikras can you give some hints where one has to start fixing this in redux-form? We currently hacked around it by implementing a custom component, which gets a separate error property and handles the touched state itself.

If I have time and the code is not too complex I would try providing a pull request.

[erikras]

Good news! Array validation errors in v6.0.0-alpha-7.

[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.