🏠 Home / Hub

🔷 Quasar Lesson 04 — Forms & Validation

← Back to Quasar Menu  |  🏠 Hub

1. QForm + Validation Rules

<template>
  <q-form @submit="onSubmit" @reset="onReset">

    <q-input
      outlined
      v-model="name"
      label="Name *"
      :rules="[val => !!val || 'Name is required']"
    />

    <q-input
      outlined
      v-model="email"
      label="Email *"
      type="email"
      :rules="[
        val => !!val || 'Email required',
        val => /.+@.+\..+/.test(val) || 'Invalid email'
      ]"
    />

    <q-input
      outlined
      v-model="age"
      label="Age"
      type="number"
      :rules="[val => val >= 18 || 'Must be 18+']"
    />

    <div>
      <q-btn type="submit" color="primary" label="Submit" />
      <q-btn type="reset" flat label="Reset" />
    </div>

  </q-form>
</template>

<script>
export default {
  data() {
    return { name: '', email: '', age: null }
  },
  methods: {
    onSubmit() {
      // form valid ဖြစ်မှ ဒီကို ရောက်တယ်
      console.log('Submitted!', this.name, this.email)
    },
    onReset() {
      this.name = ''; this.email = ''; this.age = null
    }
  }
}
</script>

2. QSelect — Dropdown

<q-select
  outlined
  v-model="city"
  :options="cities"
  label="City"
/>

<q-select
  outlined
  v-model="skills"
  :options="skillOptions"
  multiple
  label="Skills"
  use-chips
/>

// data()
cities: ['Yangon', 'Mandalay', 'Bago'],
skillOptions: [
  { label: 'HTML', value: 'html' },
  { label: 'CSS',  value: 'css' },
  { label: 'Vue.js', value: 'vue' }
]

3. QCheckbox, QRadio, QToggle

<!-- Checkbox -->
<q-checkbox v-model="agree" label="I agree to terms" />

<!-- Multiple checkboxes -->
<q-checkbox v-model="selected" val="html" label="HTML" />
<q-checkbox v-model="selected" val="css"  label="CSS"  />

<!-- Radio -->
<q-radio v-model="gender" val="male"   label="Male"   />
<q-radio v-model="gender" val="female" label="Female" />

<!-- Toggle switch -->
<q-toggle v-model="darkMode" label="Dark Mode" />

<!-- Slider -->
<q-slider v-model="volume" :min="0" :max="100" label />

<!-- Rating -->
<q-rating v-model="stars" :max="5" color="yellow" />

4. Programmatic Validation

<q-form ref="myForm">
  <!-- inputs -->
</q-form>

// Script မှာ validate() ခေါ်
async submitForm() {
  const valid = await this.$refs.myForm.validate()
  if (valid) {
    // send to API
  }
}

// Reset validation
this.$refs.myForm.resetValidation()
:rules = array of functions — val ကို စစ်ပြီး true (valid) သို့မဟုတ် error string ပြန်ပေး
QForm ထဲ submit type button ခဲ့ရင် rules အကုန် auto validate လုပ်တယ်

← Quasar 03  |  Next: Quasar 05 → QTable →

📌 Study Checklist