Пытаюсь использовать валидатор класса в проекте квазара, но я не слишком уверен, как его настроить - PullRequest
Новая
       7

Пытаюсь использовать валидатор класса в проекте квазара, но я не слишком уверен, как его настроить

0 голосов
/ 14 февраля 2020

Я пытаюсь использовать пакет class-validator внутри моего проекта Quasar / Typescript. Я создал отдельный файл Typescript с классом со всеми моими переменными и декораторами, которыми я хочу их украсить. Теперь, когда я импортирую этот класс в свой компонент и вызываю функцию Validate, используемую с пакетом, он ничего не делает. Я знаю, что я делаю что-то не так, и я просто хотел бы знать, каким будет правильный способ его установки с моей текущей настройкой проекта. Код компонента ниже: 

<template>
  <q-dialog v-model="opened" :persistent="true" :bordered="true">
    <q-card style="width: 50vw;">
      <q-toolbar>
        <q-toolbar-title>Add Course</q-toolbar-title>
        <q-btn flat round dense icon="close" v-close-popup />
      </q-toolbar>
      <q-card-section class="col">
        <q-input v-model="name" label="Name" />
        <q-input v-model="code" label="Code" />
        <q-input v-model="credithours" label="Credit Hours" type="number"/>
        <q-input v-model="numlabs" label="Number of Labs" type="number"/>
        <q-input v-model="contacthours" label="Contact Hours" type="number" />
        <q-card-actions align="right">
          <q-btn color="primary" :disable="disabled" @click="submit();">Add</q-btn>
          <q-btn color="red" @click="toggle()">Cancel</q-btn>
        </q-card-actions>
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { validate } from "class-validator";
import { AddCourseValidation } from 'src/store/course/addcourseindex'

@Component
export default class AddCourse extends Vue {
  private name = ''
  private code = ''
  private credithours = 0
  private numlabs = 0
  private contacthours = 0
  opened = false

  toggle() {
    this.opened = !this.opened
    this.submit()
    this.clear()
  }

  clear() {
    this.name = ''
  }

  submit() {
    let courseobject= new AddCourseValidation()
    courseobject.name=this.name
    courseobject.code=this.code
    courseobject.creditHours=this.credithours
    courseobject.numberOfLabs=this.numlabs
    courseobject.contactHours=this.contacthours
    validate(courseobject).then(errors => {
      if(errors.length > 0) {
        console.log("validation failed. errors: ", errors)
      } else {
        console.log("Validation succeed")
      }
    })
    console.log('Submit attempted')
  }

  get disabled(): boolean {
    return this.name === ''
  }
}
</script>

Машинописный файл с классом: 

import { Min, IsNotEmpty} from "class-validator";

export class AddCourseValidation {
  @IsNotEmpty({
    message: "Cannot be empty"
  })
  id: string = ''

  @IsNotEmpty({
    message: "Cannot be empty"
  })
  code: string = ''

  @IsNotEmpty({
    message: "Cannot be empty"
  })
  name: string = ''
  @Min(0)
  creditHours: number = 0

  @Min(0)
  numberOfLabs: number = 0

  @Min(0)
  contactHours: number = 0
}
...