vform icon indicating copy to clipboard operation
vform copied to clipboard

Typescript validation errors

Open andrewanswer opened this issue 4 months ago • 0 comments

  1. 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.

  1. 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.

2024-10-10-05-55-31

Please fix it.

andrewanswer avatar Oct 09 '24 22:10 andrewanswer