vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on validateOn demo

pull/6632/head
Mert Sincan 2024-10-23 22:19:13 +01:00
parent 94845433d8
commit eaa03d8e72
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/showcase/doc/forms/ValidateOnDoc.vue
View File

@ -2,7 +2,7 @@
<DocSectionText v-bind="$attrs">
<p>
Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission, with options to apply this behavior globally or to specific fields via <i>validateOnValueUpdate</i>,
<i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i>.
<i>validateOnBlur</i>, <i>validateOnMount</i>, and <i>validateOnSubmit</i>, which can also be set in PrimeVue components using <i>formControl</i> property.
</p>
</DocSectionText>
<div class="card flex justify-center">
@ -12,7 +12,7 @@
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
@ -42,7 +42,7 @@ export default {
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
@ -63,7 +63,7 @@ export default {
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }"/>
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
@ -126,7 +126,7 @@ export default {
<Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">
<InputText name="name" type="text" placeholder="Name" fluid />
<InputText name="name" type="text" placeholder="Name" fluid :formControl="{ validateOnValueUpdate: true }" />
<Message v-if="$form.name?.invalid" severity="error">{{ $form.name.error.message }}</Message>
</div>
<div class="flex flex-col gap-2">

7
packages/form/src/useform/index.js
View File

@ -9,6 +9,7 @@ function tryOnMounted(fn, sync = true) {
export const useForm = (options = {}) => {
const states = reactive({});
const fieldOptionMap = reactive({});
const valid = computed(() => Object.values(states).every((field) => !field.invalid));
const getInitialState = (field) => {
@ -32,6 +33,7 @@ export const useForm = (options = {}) => {
const defineField = (field, fieldOptions) => {
states[field] ||= getInitialState(field);
fieldOptionMap[field] = fieldOptions;
const props = mergeProps(resolve(fieldOptions, states[field])?.props, resolve(fieldOptions?.props, states[field]), {
name: field,
@ -63,7 +65,7 @@ export const useForm = (options = {}) => {
states[field].dirty = true;
}
(fieldOptions?.validateOnBlur ?? isFieldValidate(field, options.validateOnValueUpdate ?? true)) && validate(field);
(fieldOptions?.validateOnValueUpdate ?? isFieldValidate(field, options.validateOnValueUpdate ?? true)) && validate(field);
}
);
@ -117,6 +119,9 @@ export const useForm = (options = {}) => {
};
const validateOnMounted = () => {
const field = Object.keys(fieldOptionMap).find((field) => fieldOptionMap[field]?.validateOnMount);
field && validate(field);
isArray(options.validateOnMount) ? options.validateOnMount.forEach(validate) : validate();
};