Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

QForm #3675

Closed
hawkeye64 opened this issue Mar 25, 2019 · 1 comment
Closed

QForm #3675

hawkeye64 opened this issue Mar 25, 2019 · 1 comment

Comments

@hawkeye64
Copy link
Member

Provide a QForm that can do automatic rule validation on child and nested components that support it.
I have come up with some code (likely needs a bit of work):

import Vue from 'vue'
import slot from 'quasar/src/utils/slot.js'

export default Vue.extend({
  name: 'QForm',

  methods: {
    validate () {
      let value = true
      for (let i = 0; i < this.$children.length; ++i) {
        const component = this.$children[i]
        if ('validate' in component && typeof component.validate === 'function') {
          if (!component.validate()) {
            value = false
          }
        }
      }
      return value
    },
    resetValidation () {
      for (let i = 0; i < this.$children.length; ++i) {
        const component = this.$children[i]
        if ('resetValidation' in component && typeof component.resetValidation === 'function') {
          component.resetValidation()
        }
      }
    },
    __onSubmit (event) {
      // Abort if the element emitting the event is not
      // the element the event is bound to
      if (event.target !== event.currentTarget) return
      // Stop event propagation
      event.stopPropagation()
      // Prevent the default handler for this element
      event.preventDefault()
      if (this.validate()) {
        this.$emit('submit')
      } else {
        this.$emit('error')
      }
    },
    __onReset (event) {
      // Abort if the element emitting the event is not
      // the element the event is bound to
      if (event.target !== event.currentTarget) return
      // Stop event propagation
      event.stopPropagation()
      // Prevent the default handler for this element
      event.preventDefault()
      if (this.resetValidation()) {
        this.$emit('reset')
      }
    }
  },

  render (h) {
    return h('form', {
      staticClass: 'q-form',
      on: {
        submit: this.__onSubmit,
        reset: this.__onReset
      }
    }, slot(this, "default"))
  }
})
@rstoenescu
Copy link
Member

Merged. Will tweak it.

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants