mobx-react-form icon indicating copy to clipboard operation
mobx-react-form copied to clipboard

validateOnAdd fields or nested fields

Open jcheroske opened this issue 7 years ago • 2 comments

This library is incredible! Thank you for all your hard work.

I'm seeing a behavior that's confusing me, and I just wanted to make sure it was by-design.

When I have validateOnInit: true and showErrorsOnInit: false, the form starts with the following properties set:

{
  isValid: false,
  hasError: true,
  error: null
}

That all looks correct to me.

If I then add an element to a nested field array, and look at the initial state of one of the newly created fields, I see its initial state as:

{
  isValid: true,
  hasError: false,
  error: null
}

It seems like, when adding a nested field, it's not being validated upon creation. In other words, adding a field dynamically doesn't seem to respect the validateOnInit flag. Is this correct? Is there a way to have newly added nested fields undergo an initial validation?

jcheroske avatar Nov 02 '17 00:11 jcheroske

After thinking about this some more, I can see that I was misunderstanding the validateOnInit flag. I'm curious though about my question at the end of my previous post. Does it make sense to add a validateOnAdd flag that causes newly created fields to be validated immediately after onAdd is called?

jcheroske avatar Nov 02 '17 18:11 jcheroske

This is a good question, and can be a good enhancement to have.

I will think about how implement it for the next releases.

Thank You for the contribution.

foxhound87 avatar Nov 04 '17 12:11 foxhound87

Sorrry, not going to implement this validateOnInit "per field" option because the validation validates all the form (with nested fields).

To validate after adding a field just do:

fieldset.add().validate();

foxhound87 avatar Mar 29 '23 19:03 foxhound87