vform
vform copied to clipboard
Typescript validation errors
- Form.ts:
1.1. recentlySuccessfulTimeoutId: number | undefined = undefined should be changed to recentlySuccessfulTimeoutId: NodeJS.Timeout | undefined = undefined
1.2. import { serialize } from 'object-to-formdata' but dependency object-to-formdata does not install automatically. I installed it manually.
- in my Vue3 files (Typescript) I use this code
<script lang="ts" setup>
import Form from 'vform';
import {defineProps, reactive} from 'vue';
const form = new Form({
name: '',
email: '',
});
const formR = reactive(form);
const errors = formR.errors;
const onSubmit = () => {
formR.patch('/profile').then(response => {
if (response.status === 200) {
window.location = '/dashboard'
}
});
};
</script>
<template>
<form
@submit.prevent="onSubmit()"
>
<TextInput
id="name"
type="text"
class="mt-1 block w-full"
v-model="form.name"
required
autofocus
autocomplete="name"
/>
<InputError class="mt-2" :message="errors.get('name')"/>
</div>
<div>
<InputLabel for="email" value="Email"/>
<TextInput
id="email"
type="email"
class="mt-1 block w-full"
v-model="form.email"
required
autocomplete="username"
/>
<InputError class="mt-2" :message="errors.get('email')"/>
</div>
<div class="flex items-center gap-4">
<PrimaryButton :disabled="form.busy">Save</PrimaryButton>
<Transition
enter-active-class="transition ease-in-out"
enter-from-class="opacity-0"
leave-active-class="transition ease-in-out"
leave-to-class="opacity-0"
>
<p
v-if="formR.successful"
class="text-sm text-gray-600"
>
Saved.
</p>
</Transition>
</div>
</form>
</template>
It works fine, but I see red words in PHPStorm IDE: formR.errors [errors is red] / formR.patch() [patch is red] / formR.successful [successful is red]. It's wrong - when I change code, the validation or data sending is breaks.
Please fix it.