I’m trying to use PrimeVue Forms and I have validation working using Valibot (though I think this question is agnostic of what validation framework I’m using).
In my template, I have the following:
<Form
v-slot="form"
:initialValues="location"
:resolver
@submit="formSubmit"
class="h-full flex flex-col justify-between"
>
<!-- Form -->
<div class="flex flex-col overflow-auto gap-4">
<!-- Details -->
<Panel :header="label('details')">
<div class="flex flex-col gap-4">
<!-- Name -->
<div class="flex flex-col">
<IftaLabel>
<InputText name="name" type="text" placeholder="" fluid />
<label>{{ label("floor_name") }}</label>
</IftaLabel>
<div class="text-xxs text-right mt-1" v-if="form?.name?.invalid">{{ form.name.error?.message }}</div>
</div>
</div>
</Panel>
</div>
<!-- Footer -->
<div class="safe bottom mt-4">
<div class="flex gap-2 justify-between">
<div></div>
<div class="flex gap-2">
<Button icon="fa-sharp fa-light fa-xmark" :label="label('discard')" severity="warn" @click="discard(form)" />
<Button icon="fa-sharp fa-light fa-floppy-disk" :label="label('save')" type="submit" :disabled="!form.valid" />
</div>
</div>
</div>
</Form>
My question is this – can I reference the state of the form from JavaScript outside the scope of the form itself? For example, could I have a computed value that determines if the form is dirty or not? I’m using the following to determine if the form is dirty from functions called from the form, but can’t work out how to get field dirty states from outside the form.
const discard = async (form) => {
console.log(
"Dirty",
Object.keys(form).reduce((result, key) => result || form[key].dirty === true, false)
);
};