0

TECHS: Vue.js 3 com TS, Quasar

REPO NO GITHUB: Clique aqui

NOME DOS ARQUIVOS EM QUE ESTÁ A MINHA DÚVIDA: tables.vue e tables.ts, O link é esse

O QUE EU QUERO QUE O MEU CÓDIGO FAÇA: Quero que os meu input ou o meu select se ele for obrigatorio, que ele retorne erro se o user não preencher ele

A ESTRUTURA

Eu tenho no meu arquivo table.ts, dentro da propriedade data() um array com a seguinte estrutura:

data() {
  return {
    inputs: [
    {
        vModel: '',
        name: 'nameTable',
        type: 'text',
        title: 'Nome da tabela',
        required: true
      },
      {
        vModel: '',
        type: 'number',
        name: 'numberRow',
        title: 'Quantidade de linhas da tabela',
        required: true
      },
      {
        vModel: '',
        name: 'dayBegin',
        type: 'date',
        title: 'Dia inicial da tabela',
        required: false
      },
      {
        vModel: [],
        name: 'weekDays',
        title: 'Dias da Semana que a tabela vai ter que repetir',
        options: [{
            label: "Domingo",
            value: "sunday"
          },
          {
            label: "Segunda",
            value: "monday"
          },
          {
            label: "Terça",
            value: "tuesday"
          },
          {
            label: "Quarta",
            value: "wednesday"
          },
          {
            label: "Quinta",
            value: "thursday"
          },
          {
            label: "Sexta",
            value: "friday"
          },
          {
            label: "Sábado",
            value: "saturday"
          }
        ],
        required: true
      },
    ],
  }
},

Cada objeto representa um input ou select e note que nos objetos eu falo se ele é required ou não. Já no meu html que está no table.vue a parte do código que eu utilizo o objeto inputs é com o q-input ou q-select, ex.:

<div 
  class="my-5" 
   v-for="input in inputs" 
   :key="input.title">
   
  <span class="font-bold">{{ input.title.toUpperCase() }}</span>
  
  <q-select 
    v-if="input.options"  
    v-model="input.vModel" 
    :options="input.options" 
    filled multiple 
   />
    
  <q-input 
    v-else 
    v-model="input.vModel" 
    :type="input.type"
    filled 
   />
</div>

PROBLEMA

Eu quero fazer uma validação de que dependendo do input ou select ele seja obrigatorio levando em conta o required e retorne uma mensagem para o user, só que somente se o input ele for obrigatorio, e só para lembrar que esse input é um array eu tentei com o vuelidate, mas não conseguir entender muito. Como eu poderia fazer isso?

1 Resposta 1

0

Você deve informar a propriedade rules em cada input ou select. A propriedade rules deve ser uma array de funções que retornar TRUE ou uma mensagem de erro caso o valor não seja valido.

Por exemplo:

:rules="[ 
    username => username.length > 6 || 'O nome do usuário ter ter mais que 6 caracteres',
    username => !username.includes(' ') || 'O nome do usuário não pode conter espaços'
]"

Com as regras acima, o valor do input deve conter mais de 6 caracteres e não pode conter espaços.

Consegui as informações na documentação oficial do Quazar:

https://quasar.dev/vue-components/input

Aqui abaixo está seu código de exemplo pronto para você testar.

<div 
  class="my-5" 
   v-for="input in inputs" 
   :key="input.title">
   
  <span class="font-bold">{{ input.title.toUpperCase() }}</span>
  
  <q-select 
    v-if="input.options"  
    v-model="input.vModel" 
    :options="input.options"
    :rules="[ val => val.trim().length > 0 || 'Campo obrigatório' ]"
    filled multiple 
   />
    
  <q-input 
    v-else 
    v-model="input.vModel" 
    :type="input.type"
    :rules="[ val => val || 'Campo obrigatório' ]"
    filled 
   />
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .