react-final-form-arrays

react-final-form-arrays copied to clipboard

Follow discussion here: https://github.com/final-form/react-final-form-arrays/issues/3#issuecomment-351748774

When mixed field with field arrays, the form cannot submit due to errors object can never be empty ie.

Form errors:
{
  "customers": [
    {}
  ]
}

I understand the reason for field arrays keys here, but I have to write workarounds such as:

onSubmit = () => {
  this.formEl.dispatchEvent(new Event('submit')); // trigger final-form submit
  this.submit(); // check if "errors.customers" array is full of empty object and submit
}

Just an idea - could we expose validation function (the function which checks for form errors then execute props.onSubmit()) to make it more flexible for this usecase?

cc @davidhenley

So change invalid to be false if error returns an empty array or an array of empty objects as well as undefined?

@huygn you can change nameValidate to return undefined if there are no errors, like it's mentioned in the docs.

Here is an example, check updated nameValidate function: https://codesandbox.io/s/jzp6q8yxw3

Am I missing something?? I updated to latest, and this stopped working again. Did something change in the lastest versions? @erikras

arrayValidate:

export 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.reason) errors.reason = 'Required';

    errorArray.push(errors);
  });

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

Can you show me a sandbox it worked on, with older versions, and a sandbox it doesn't work on with newer versions?

@erikras Here you go:

The FieldArray validate isn't even being called. I don't know what happened? This was working fine with PLENTY of testing as you know.

@erikras any ideas on the above?

Hi @davidhenley

I test your codesandbox with the last packages of react final form array it works ;-)

Nice. I ended up switching to the new Formik FieldArrays bc the issue was never addressed.

lol,

Ok and you prefer formik or react final form?

They are about the same. You don't have to make many changes to your inputs. I switched back and forth 3-4 times but with Formik FieldArrays being in the master branch, it made sense to go with Formik.

@davidhenley I'm confused. On Dec 14, you agreed that it was fixed by v1.3.5, and then on Dec 21, you post a failing sandbox that is using v1.0.0.