Field Array validation not working as expected

[davidhenley]

@erikras

As you can see the validation is returning correctly, but the form errors are not showing for the field array.

Try typing in a first name.

Also try adding 6 customers, each with just a last name. You only get 3 form errors

[davidhenley]

@erikras Still not working correctly in 1.0.1

Steps to reproduce
Add 6 customers, each with just a last name.

What happens
You only see 3 form errors

Expected
To see 6 form errors, one for each customer

[erikras]

Yep, that's a bug. Thanks!

[davidhenley]

Formik's FieldArray has the same issue right now (and touched issues). Array validation seems to be a tricky thing. Redux-Form is the only react form tool that handles these gracefully. This is my last issue with creating all the forms for my company's site.

[erikras]

Fix published in final-form@1.3.3.

[erikras]

Hmm.. Seems to not be fixed in your sandbox... Reopening....

[erikras]

Something went wrong in the publishing of v1.3.3. Fixed in v1.3.4.

One thing, if your array is full of objects, you need to push an object.

push('customers', undefined) // ❌

push('customers', {}) // ✅

[davidhenley]

My meta.error is still undefined for any Field in the field array, even though the form errors are working correctly.

FieldArray errors and meta.touched are showing and hiding correctly.

My validate function:

const productValidate = values => {
  const errorArray = [];

  values.forEach(value => {
    const errors = {};

    if (!value.cases && !value.bottles) {
      errors.cases = 'Quantity Required';
      errors.bottles = 'Quantity Required';
    }

    errorArray.push(errors);
  });

  return errorArray;
}

[erikras]

Show updated sandbox?

[davidhenley]

OK. Working on it now.

[davidhenley]

Yep. Here it is. Showing null for error. Also, try adding 3-4 customers with last names. and look at form errors. They don't match up. Only showing one form error for the entire array.

[erikras]

I'm not seeing the null error. Is it being displayed somewhere?

I did find another bug from this sandbox, though, so thanks for that.

[davidhenley]

@erikras it's in the console.

[erikras]

Duh. 🙄🤦‍♂️

Okay, escalating this issue back to "bug" status.

[erikras]

Published fix in v1.3.5.

[davidhenley]

Verified. Thank you for all your help!

[erikras]

And thank you for kicking the tires! 👍

[davidhenley]

One thing to note, is if the array is full of empty objects, you need to return undefined in the validate to mark the form as valid.

My validate function now looks like this:

const productValidate = values => {
  const errorArray = [];

  values.forEach(value => {
    const errors = {};

    if (!value.name) errors.name = 'Required';
    if (!value.cases && !value.bottles) {
      errors.cases = 'Required';
      errors.bottles = 'Required';
    }
    if (!value.billback) errors.billback = 'Required';

    errorArray.push(errors);
  });

  if (errorArray.some(object => !_.isEmpty(object))) {
    return errorArray;
  } else {
    return undefined;
  }
}

[huygn]

Yea I have the same concern as above, errorArray must keeps empty objects to ensure error message goes into the correct array field. I ended up with not using onSubmit and write isValid(errors) for my custom submit method, feels really dirty :/.

[davidhenley]

Yeah, I tried to return undefined for each item, then realized the errors weren't mapping anymore. Mine isn't that bad. I mean the only thing I think that @erikras could do is use the same some function on his end to check if all items are empty then return undefined if they are.

This would allow us to go back to returning just the array.

I would try to do a pull request but I've never done one and not sure what I'm doing.