Knob validation demo update

pull/3774/merge
Tuğçe Küçükoğlu 2023-03-20 15:52:27 +03:00
parent 27ca56111e
commit ba0bf23bc7
1 changed files with 23 additions and 21 deletions

View File

@ -19,14 +19,12 @@ import { useField, useForm } from 'vee-validate';
export default { export default {
setup() { setup() {
const { handleSubmit, resetForm } = useForm(); const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField, { const { value, errorMessage } = useField('value', validateField, {
validateOnValueUpdate: false validateOnValueUpdate: false,
initialValue: 0
}); });
const toast = useToast(); const toast = useToast();
value.value = 0;
function validateField(value) { function validateField(value) {
if (!value) { if (!value) {
return 'The value must be greater than zero.'; return 'The value must be greater than zero.';
@ -38,9 +36,11 @@ export default {
const onSubmit = handleSubmit((values) => { const onSubmit = handleSubmit((values) => {
if (values.value > 0) { if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 }); toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm(); resetForm({
values: {
value.value = 0; value: 0
}
});
} }
}); });
@ -79,12 +79,11 @@ export default {
setup() { setup() {
const { handleSubmit, resetForm } = useForm(); const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField, { const { value, errorMessage } = useField('value', validateField, {
validateOnValueUpdate: false validateOnValueUpdate: false,
initialValue: 0
}); });
const toast = useToast(); const toast = useToast();
value.value = 0;
function validateField(value) { function validateField(value) {
if (!value) { if (!value) {
return 'The value must be greater than zero.'; return 'The value must be greater than zero.';
@ -96,9 +95,11 @@ export default {
const onSubmit = handleSubmit((values) => { const onSubmit = handleSubmit((values) => {
if (values.value > 0) { if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 }); toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm(); resetForm({
values: {
value.value = 0; value: 0
}
});
} }
}); });
@ -123,13 +124,12 @@ import { useToast } from 'primevue/usetoast';
import { useField, useForm } from 'vee-validate'; import { useField, useForm } from 'vee-validate';
const { handleSubmit, resetForm } = useForm(); const { handleSubmit, resetForm } = useForm();
const { value, errorMessage } = useField('value', validateField,{ const { value, errorMessage } = useField('value', validateField, {
validateOnValueUpdate: false validateOnValueUpdate: false,
}); initialValue: 0
});
const toast = useToast(); const toast = useToast();
value.value = 0;
function validateField(value) { function validateField(value) {
if (!value) { if (!value) {
return 'The value must be greater than zero.'; return 'The value must be greater than zero.';
@ -141,9 +141,11 @@ function validateField(value) {
const onSubmit = handleSubmit((values) => { const onSubmit = handleSubmit((values) => {
if (values.value > 0) { if (values.value > 0) {
toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 }); toast.add({ severity: 'info', summary: 'Form Submitted', detail: values.value, life: 3000 });
resetForm(); resetForm({
values: {
value.value = 0; value: 0
}
});
} }
}); });
<\/script> <\/script>