The prop 'hasError' generates a TS error, types that are generated based on the docs are incorrect

First of all I deeply apologize for my bad English. I wanted to use the internal validation from quasar and my code is below this text also what I’ve learned is from the docs here : https://quasar.dev/vue-components/input#example--form-validation But The prop ‘hasError’ (that is used for internal validation on inputRef and it gives ‘true’ if the inputs has error) generates a TS error that says Property 'hasError' does not exist on type QInput and I guess there is a problem with the types that are generated based on the docs.

As you can see in the simple code below, I have to use a // @ts-expect-error because the code inuputRef.value?.hasError generates an error and it also gives me what I wanted for validations at the same time. the TS error says : Property 'hasError' does not exist on type QInput but the code is correct and the property ‘hasError’ does exist on type QInput and it’s just the TS types that are generated based on the docs and they are incorrect I guess.

Thanks in advance 🙏

My example code that shows the problem but first remove the // @ts-expect-error from it :

<template>
  <q-page class="flex flex-center" padding>
    <form @submit.prevent.stop="onSubmit">
      <q-card class="full-width" style="max-width: 350px">
        <q-card-section class="bg-primary text-white">
          <div class="text-h6">login</div>
          <div class="text-subtitle2">
           subtext
          </div>
        </q-card-section>

        <q-separator />

        <q-card-actions vertical>
          <q-input
            ref="usernameRef"
            v-model="username"
            standout="bg-teal text-white"
            label="username"
            class="q-my-md"
            hint="this is username"
            lazy-rules
            :rules="usernameRules"
          >
            <template #prepend>
              <q-icon name="fingerprint" />
            </template>
          </q-input>

          <q-input
            ref="passwordRef"
            v-model="password"
            standout="bg-teal text-white"
            label="password"
            class="q-mb-md"
            hint="this is password"
            :type="isPwd ? 'password' : 'text'"
            lazy-rules
            :rules="passwordRules"
          >
            <template #prepend>
              <q-icon name="password" />
            </template>
            <template #append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>

          <q-btn
            color="secondary"
            icon="login"
            label="login"
            class="q-mb-sm"
            @click="onSubmit"
          />
        </q-card-actions>
      </q-card>
    </form>
  </q-page>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useQuasar, QInput } from 'quasar';

export default defineComponent({
  name: 'Login',
  setup() {
    const $q = useQuasar();

    const username = ref<string>('');
    const usernameRef = ref<QInput | null>(null);

    const usernameRules = [
      (value: string) =>
        (value !== null && value !== '') ||
        'username cant be null',
    ];

    const password = ref<string>('');
    const passwordRef = ref<QInput | null>(null);

    const passwordRules = [
      (value: string) =>
        (value !== null && value !== '') || 'password cant be null',
    ];

    const isPwd = ref<boolean>(true);

    function onSubmit(): void {
      usernameRef.value?.validate();
      passwordRef.value?.validate();

      // @ts-expect-error     I have to temporary use a (ts-expect-error). Using the prop 'hasError' generates a ts error but it's correct and the docs are incorrect in this point it seems, and there is a problem with the types that are generated based on the docs I guess.
      if (usernameRef.value?.hasError || passwordRef.value?.hasError) {
        $q.notify({
          icon: 'warning',
          color: 'negative',
          message: 'please fix the errors first the press it again',
        });
      } else {
        $q.notify({
          icon: 'done',
          color: 'positive',
          message: 'succeed',
        });
      }
    }

    return {
      username,
      usernameRef,
      usernameRules,
      password,
      passwordRef,
      passwordRules,
      isPwd,
      onSubmit,
    };
  },
});
</script>

[rstoenescu]

hasError is still needed @yusufkandemir

[yusufkandemir]

Thanks for the kind comment, I appreciate it. I totally understand you and agree that this is confusing.

Generally, if something is confusing like this, it might end up being a private thing accidentally used somewhere, or just got overlooked with less to no documentation at all. hasError example is 3 years old, so it might be both. So, that’s why I said we have to evaluate it first. Then, if we consider hasError is something really needed, and we have other dynamic properties for other components as well, we will update the documentation to make them clearer, and they will also be in the API card, just like props, methods, events, etc.

So, I didn’t close the issue because we will evaluate this, and you don’t have to close it.