I'm currently working on a view that requires validation for certain fields. My main challenge is figuring out how to pass a prop to an InputValidationWrapper Component using something like v$.[keyField], but I'm unsure about the type to set for it.
This issue is in SignInView.vue:
<template>
<div class="sign-in-view">
<form @submit.prevent="onSubmit" class="sign-in-form">
<div class="inputs-container">
<InputValidationWrapper :validationField="v$.email" required email>
<BaseInput title="Email" v-model="formData.email" />
</InputValidationWrapper>
</div>
<button type="submit">submit</button>
</form>
</div>
</template>
<script setup lang="ts">
import BaseInput from "@/components/inputs/BaseInput.vue";
import InputValidationWrapper from "@/components/validators/InputValidationWrapper.vue";
import useVuelidate from "@vuelidate/core";
import { required, email } from "@vuelidate/validators";
import { computed, reactive } from "vue";
const formData = reactive({
email: "",
password: "",
});
const validationRules = computed(() => {
return {
email: { required, email },
password: { required },
};
});
const v$ = useVuelidate(validationRules, formData);
const onSubmit = async () => {
const result = await v$.value.$validate();
if (!result) return;
console.log("submit");
};
</script>
The issue lies within InputValidationWrapper.vue:
<template>
<div class="input-wrapper">
<slot />
<div class="errors-block">
<RequiredValidation
:isDirty="validationField.$dirty"
:isInvalid="validationField.required.$invalid"
v-if="required" />
<EmailValidation :isDirty="validationField.$dirty" :isInvalid="validationField.email.$invalid" v-if="email" />
</div>
</div>
</template>
<script setup lang="ts">
import RequiredValidation from "./RequiredValidation.vue";
import EmailValidation from "./EmailValidation.vue";
import type { NestedValidations } from "@vuelidate/core/index.js";
type PropsType = {
validationField: NestedValidations; //???
required?: boolean;
email?: boolean;
};
defineProps<PropsType>();
</script>
To address this, I created separate components for each error and passed simple booleans as props. However, I ran into errors with validationField.$dirty causing
Property '$dirty' does not exist on type NestedValidations<ValidationArgs<unknown>, unknown>'.validationField.email.$invalid.