meta values not correct

[danh65]

I have a form using useForm and useFieldArray with Vue 3 composition API and the keep alive router view.
It uses meta from useForm to enable/disable the form Back, Reset and Submit buttons, ei, meta.valid and meta.dirty

The problem I'm having is when the user adds a row or two to the array (it's using the push method) and types values into the fields, it removes the values when you exit the field. Also meta.valid is never true after that happens.

Also after data is loaded into the form from an existing record, meta.valid is always false even if all validation requirements are met and meta.dirty is always true even though no changes have been made. This is happening on all my forms, even without arrays.

Any ideas what might be wrong or how to test?
Thanks, Dan

[logaretm]

Not sure, it seems like you have multiple issues at the same time. Could you create this in simple demo over stackblitz or codesandbox?

[danh65]

I have it showing the data now and it's acting similar to what I'm seeing in my forms.

You can open it and play around with it. For example, remove one of the rows and it blanks out some of others. The top one blanks out the rest of them. Click the Reset button and it blanks out all the inputs but shows the form is valid.

[logaretm]

You seem to have the same issue as in #3735 , try to assign a reactive ref to the useField call in your InputText component:

import { toRef } from 'vue';

const { value, errors } = useField(toRef(props, 'name'));

[danh65]

Thank you @logaretm, that gets me further! I've updated the codesandbox demo and it's working a lot better, but I'm still having an issue or two.

If you open it again and remove the LAST row from the form, it shows the form is not valid and therefore can't be submitted. Removing any other row seems to be fine except that the form is not dirty, but maybe that needs to be handled manually??

Also, if you make another change to a field to make the form dirty and the reset button enabled, then click the reset button, it brings back all the rows, but all the fields are empty.

[logaretm]

Sorry for the delay.

The meta issue could be a bug so I will investigate it and report back. You shouldn't need to handle that manually.

For the reset issue, the fields are blanking because that's the native HTML behavior which needs to be prevented like this:

@reset.prevent="onReset"

This should be added to the docs in some capacity.

[logaretm]

The last row removal issue is indeed a bug, I will work on a hotfix and release it shortly.

You can track it here:

#3748

[danh65]

I'm still waiting a reply on the last post. See the last post above.
I've updated the sandbox demo and it's working better, but still has some issues.
If you remove the last row from the form, it shows the form is not valid (and also not dirty). Also, if you reset the form, it brings back all the fields, but they're all empty. Can you please take a look and let me know what's wrong? Thanks, Dan

[logaretm]

Sorry for the delay, I have responded in the same thread.