Form: initialValues Not Updating in Read-Only Fields

[BenJackGill]

Describe the bug

Description

When using the Form component, I often need initialValues that are fetched asynchronously from a backend. These values are initially empty until the data is loaded.

With PrimeVue components like InputText, the computed initialValues work as expected, and the fields correctly update when the async data is loaded.

However, when trying to display read-only information inside a div (or a similar non-input element), the computed initialValues do not update correctly. The async values never populate the div.

Even when wrapping the div inside a FormField, the issue persists.

Reproduction

Here’s a minimal example demonstrating the issue:

<template>
  <div class="card flex justify-center">
    <Form
      v-slot="$form"
      :resolver="validationResolver"
      @submit="onFormSubmit"
      :initial-values="initialValues"
      class="flex flex-col gap-4 w-full sm:w-56"
    >
      <!-- This InputText correctly loads the async initial value -->
      <InputText placeholder="First Name" name="firstName" />

      <!-- This div does not display the async initial value -->
      <div>
        {{ $form.lastName?.value }}
      </div>

      <!-- Using FormField does not resolve the issue -->
      <FormField v-slot="$field" name="lastName">
        <div>
          {{ $field.value }}
        </div>
      </FormField>

      <Button type="submit" severity="secondary" label="Submit" />
    </Form>
  </div>
</template>

<script setup lang="ts">
import type { FormSubmitEvent } from '@primevue/forms';
import { yupResolver } from '@primevue/forms/resolvers/yup';
import { useToast } from 'primevue/usetoast';
import { computed, onMounted, ref } from 'vue';
import { object, string } from 'yup';

/* Simulated async database fetch */
const fetchFakeUserDetails = async () => {
  await new Promise((resolve) => setTimeout(resolve, 500));
  return { age: '26', firstName: 'John', lastName: 'Wick' };
};

const userDetails = ref({ age: '', firstName: '', lastName: '' });

onMounted(async () => {
  userDetails.value = await fetchFakeUserDetails();
});

/* Computed initial values */
const initialValues = computed(() => ({
  age: userDetails.value.age ?? '',
  firstName: userDetails.value.firstName ?? '',
  lastName: userDetails.value.lastName ?? '',
}));

const validationSchema = object({
  age: string().required('Age is required.'),
  firstName: string().required('First name is required'),
  lastName: string().required('Last name is required.'),
});

const validationResolver = yupResolver(validationSchema);
const toast = useToast();

const onFormSubmit = (event: FormSubmitEvent) => {
  if (event.valid) {
    toast.add({
      life: 3000,
      severity: 'success',
      summary: 'Form submitted successfully.',
    });
  }
};
</script>

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/yucbttft-muied3vv?file=src%2FApp.vue

Environment

primevue 4.3.1

Vue version

3.5.13

PrimeVue version

4.3.1

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

1. Load the component with initialValues coming from an async fetch.
2. Observe that InputText correctly updates, but the div does not display the async-loaded value.
3. Also see that when wrapping the div in a FormField the issue persists.

Expected behavior

• Read-only fields (div) should update and display async-loaded values from initialValues, just like InputText does.
• Wrapping the div inside a FormField should allow it to correctly bind to initialValues.