Pristine remains true after adding fields to deep form array.

[webmasterkai]

The pristine property remains true after using addField(value?, index?) to a deep form. Is this intentional or a bug?

[erikras]

Great question. It is that way, but not by intentional design. In other words, I hadn't really considered that aspect of form dirtiness. pristine just means "none of the fields' value properties differ (!==) from their initial properties". redux-form is not keeping any sort of "initial array length" to compare the current state to. I wonder if it should....?

[webmasterkai]

In /examples/deep doesn't addField() change the value of the children property? I'm about to check if the submit actually sends out the empty arrays.

[erikras]

It does, but children is not a field; it's an array of fields.

[webmasterkai]

If I have a child previously saved, I open the form again and add a bunch of empty awards it looks like it would submit "children": [ { "name": "asd", "age": "1", "awards": [ null, null ] } ]. So the value of initialValues.children[0].awards[0] !== values.children[0].awards[0].

I'd vote since the value of something (albeit a deeply nested one) changes the form is dirty. This deep form business is no easy thing...

[webmasterkai]

Maybe it should be undefined instead of null with awards? An array of undefined still has a length (I think).

I dunno man. Forget I brought it up. 😜

[duro]

This is showing up for me (though in a reversed fashion) with a field that stores its value as an object. The initialValue and the value are in fact the same, but since !== checks reference with objects, I'm assuming that when redux-form moves the initialValue to value it is cloning the object (as it should) and reference changes.

It would seem that for the pristine/dirty system to be more reliable it will need to do deep comparison based on type.

[slangeberg]

👍 for deep child comparisons.

issue #1:
I have populated a deep form matching the example with data from backend. I can remove a child, but when I reset/clear the form, the child is not brought back.

#2: I have the same two children from backend. I remove a child. When I add new, I now see the data show up for the removed child, instead of seeing new, empty row added.

Looking at the online example, you can recreate #1 by adding new child(ren) and hit clear button. The child rows are still present, even if fields are empty. I would assume clearing the form would reset it to initial state of no children.

[carlyle]

👍

This issue is also present when you remove an array item that is present in the form's initialValues as well, so if the whole form is marked as pristine/dirty based on array item additions then it should be marked accordingly during array item subtractions as well

[andynoelker]

👍
Changing pristine/dirty is missing from both addField and removeField. For my app I only allow the user to save a form if that form is dirty, so when it comes to adding dynamic elements to a form it kind of breaks everything. I guess I'll have to figure out a way to manually force a form to be dirty until a fix is in place. Not sure if anything like that exists though?

[juancarlosfarah]

👍
I'm having the exact same issue with the form not flagging as dirty if I add/remove a field from a subarray. My current "dirty" fix is to keep track of the length of arrays at initialisation and then compare the current length of arrays to the original as an extra check to see if the form is dirty/pristine. Would be great to support this out of the box, though.

[flaub]

I'd also like to vote that adding/removing a field should be considered a change to the overall form data and as such, the form should be marked dirty.

[panzi]

It still doesn't set pristine to false on removeField (or dirty to true).

[sslotsky]

Bumping this. Should definitely be dirty after add/remove field.

[sslotsky]

In the meantime, I'll share a hack that I came up with in case it helps anyone. I just added a pseudo field touched to my form and marked it true on remove, e.g.

const LinkedProductsForm = reduxForm({
  form: formName,
  fields: [
    'id',
    'touched', // hack
    'product_ids[]'
  ]
}, undefined, {
  addProduct: () => addArrayValue(formName, 'product_ids')
})(Form);

  unlinkProduct(index) {
    const {fields: {touched, product_ids: productIds}} = this.props;
    return () => {
      productIds.removeField(index);
      touched.onChange(true);
    }
  }

              <LinkedProduct
                key={`linked-product-${index}`}
                productId={productId}
                product={this.getProduct(productId)}
                unlink={this.unlinkProduct(index)}
                loadProducts={loadProducts} />

[ooflorent]

Unfortunately this bug is part of Redux Form for such a long time that fixing it would result in a mass breakage because consumers had to rely on this clumsy behavior.

However it has been fixed in Redux Form v6.

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