Form dirty but fields not

[atzen88]

I have a form where all the fields are not dirty (At least according to the vee-validate dev-tools), but the form itself is.

I think this is because the intialValues of the form are different from the currentValues. This is because there are some values that are not handled by vee-validate or are not active (Some fields are shown and hidden depending on the value of another field).

Unfortunately there is currently no way to get to all the "active" fields from vee-validate to check the dirty state there. Any idea how I could accomplish this without having to define and go through all the fields per form?

Also, wouldn't it make the most sense to determine the dirty state of the form at the "active" fields?

Additinal Info:

We use Symfony with API Platform as the backend. If there is a NULL value here, it is not transmitted and therefore not set in the initial values.

But because the form fields are present and get the initial value "undefined", this is also recognized as a "change" and the form is set to dirty.

[atzen88]

@logaretm

Sorry to ask again but is there any way to get to the fields on the form.

If I could somehow access "fieldsByPath" it would help me a lot.

[logaretm]

There is a way but very tricky and wouldn't recommend. You can inject the active form in a child component with:

import { FormContextKey } from 'vee-validate';

// get access to everything `form` has.
const form = inject(FormContextKey, null);

I think what you are discussing here is related to "controlled" values. Similar to what is being discussed in #3862. So if I understood correctly, you want to be able to get the same meta information for the currently active (controlled) fields. I can think of something while I work on that PR as well.

[atzen88]

@logaretm

I am back again :-)

What I'm missing here is a separate meta-state/dirty flag for the controlledValues, but that's no longer important to me at the moment.

But I discovered another weird behavior regarding the dirty-flag.
We are currently working with classes and constructors, using them also for setting initial values like this:

const form = useForm<User>();
form.resetForm({values: new User()})

The problem is that the "currentValue" object in the check in "isSame" is not a user class but the value in meta.initialValues is, and therefore the constructor check will hit:

if (a.constructor !== b.constructor)

If I bypass this check, everything works as intended.

If this check is performed, then I think the object in form.values should be of the same type as in the initialValues or the check should not be performed.

But maybe I'm missing something?