Form: API Loaded data not passing to $form.[field].value

[magicMustard]

Describe the bug

I have an issue where I am attempting to populate the fields from an API. However, the data is not going through to the $form data object.

There is this bug here: #6755 - Not sure if it'll solve my issue, however, if it does, I'll wait till it's released.

So, essentially, in the onMounted, it is getting the data from the API and populating to the initialValues, however when this is done, it does not appear to be passing to the input fields.

If I add a v-model="initialValues.first_name", this kinda works. Where the data populates, but if you hit the submit button, it throws field errors saying it's required, because the value in the $form.first_name.value has not been populated.

Am I doing it incorrectly or is this an issue that might be resolved from this bug?

Here is my code (stripped out the non important parts):

<template>
	<Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit">
		<AppField :label="t('profiles.firstName')" name="first_name" :fieldState="$form.first_name">
			<InputText name="first_name" />
		</AppField>
		<AppField :label="t('profiles.lastName')" name="last_name" :fieldState="$form.last_name">
			<InputText name="last_name" />
		</AppField>

		<AppSubmit :create="!id" />
	</Form>
</template>

<script setup lang="ts">

const props = defineProps<{
	id?: string;
}>()

// Initial values for the form
const initialValues = ref({
	first_name: '',
	last_name: ''
});

onMounted(async () => {
	if (props.id) {
		const { data, error } = await supabase.from('profiles').select('first_name, last_name').eq('id', props.id).single();

		if (error) {
			console.error('error', error);
			return;
		}

		initialValues.value = data;
	}
});
</script>

Reproducer

https://stackblitz.com/edit/wafqr9?file=src%2FApp.vue

PrimeVue version

4.2.2

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox 132.0.1 - Fedora

Steps to reproduce the behavior

1. Create a form with input fields
2. add the v-slot="$form" to the Form and add a InputText, or anything
3. Add the expected script data, you can use the stackblitz as an example https://stackblitz.com/edit/wafqr9?file=src%2FApp.vue
4. Add a timeout to populate some data after it's loaded
5. You'll notice the data is not loading into the form.

Expected behavior

It should populate the input fields with the data as you'd expect if you were to use v-model.

[Yonaro]

I have the same issue using the zod resolver. When the form is used to create, it works. But forms are not used only for the initial creation of a record. Forms are also used for mutating existing records. I agree with magicMustard the standard vuejs v-model functionality should be kept. I guess I will keep using Vuelidate for now.

edit:
@magicMustard
Ended up using this instead https://dev.to/kouts/a-simple-vue-form-validation-composable-with-zod-38m8
works perfectly.

[magicMustard]

Thanks for the update. We moved onto formkit in the meantime. If it gets fixed, we'll come back and review.

[naumanahmed19]

I am also stuck on this issue. it should be fixed. it works with use of v-if until server data is loading. but not mutating values as expected.

[wiifree]

I agree with @naumanahmed19
It should be no problem to change values after the form was initialized. I'm also stuck in this issue.

[ljgazzano]

same issue. Any solution??

[raizdev]

with onBeforeMount it works fine... @magicMustard

[magicMustard]

with onBeforeMount it works fine... @magicMustard

That would make sense. Something I didn't consider, have moved onto another solution in the meantime. Having said this, still doesn't resolve the underlying issue.

[mertsincan]

Hello,

In 4.3.0 (next version), I added setFieldValue(name, value); and setValues(nameValueObject) to set new values to fields. The initialValue can only be set before the component is mounted.

Exp;

formRef.setValues({
    username: "fred"
    email: "fred@ferd.com"
});

Or

formRef.setFieldValue('username', 'fred');
...

Best Regards,

[allansun]

I'm eagerly awaiting the release of this feature. My upcoming project involves using PrimeVue, and I've been grappling with this issue for two days. It's hard to believe that such a well-established project lacks this feature. I'm quite curious about how others managed to get it working, especially when it comes to updating pre-existing data loaded from a database.