nast-form

nast-form

Installation

npm i -S nast-form

Prepare

import Vue from 'vue'
import App from './App'
import NastForm from 'nast-form'

Vue.use(NastForm.vue(), {})

new Vue({
  render: (h) => h(App),
}).$mount('#app')

Basic usage

<div id="app">
<form @submit.prevent="submit">
  {{ $form.errors() }}
  <div><input title="Name" :v-bind="$form.input('name')" @input="($event) => change($event, 'name')" /></div>
  <div><input title="Email" :v-bind="$form.input('email')" @input="($event) => change($event, 'email')" /></div>
  <div><button type="submit">Submit</button></div>
</form>
</div>

export default {
  name: 'App',
  mounted() {
    this.$form.init({
      name: '',
      email: '',
    })
    this.$form.rules({
      name: [ 'required', ],
      email: [ 'email', ],
    })
  },
  methods: {
    change(event, name) {
      this.$form.set(name, event.target.value)
    },
    submit() {
      if (this.$form.check()) {
        console.log(this.$form.get())
      }
    },
  },
}