What is the pattern to delete form fields such that isDirty is updated to true?

[paulleonartcalvo]

I have a form:

{
  fieldA: {...},
  fieldB: {...},
  ...
}

which is built dynamically. Users can click an Add button, and choose a field (fieldA, fieldB, fieldC,...) to add. I am passing values from my filter component's props into the useForm({values: values}). I use a separate useState array to track which fields to render. Then i render each field with a <Controller .../> with shouldUnregister set to true. The user should be able to delete each field as well, and its entry should be removed from the form. For example, if a user deletes fieldA from the array above, the resulting form should be:

{
  fieldB: {...},
  ...
}

However, i notice that even after fieldA 's <Controller/> is unregistered (since it is no longer rendered), the form's isDirty does not change to true. Why is this? How can i change my implementation, or what is the generally used pattern such that deletion/unregistration results in the isDirty changing to true? Is there a different way to achieve my expected behavior? I expected that if currentForm.deepEquals(props.values) === false, then the form is dirty, but this appears to not be the case.

[mattoni]

I'm also running into this issue. Any guidance @bluebill1049 ?

[Moshyfawn]

I might be misunderstanding your requirement, but you can pair the values API with resetOptions and pass it keepDefaultValues: true to keep your default values the same throughout the values changes to potentially achieve the desired behavior.

useForm({
  values,
  resetOptions: {
    keepDefaultValues: true
  }
})