Form

The Form component takes a fields definition and a value/v-model to create a full featured form with grid and everything. If you "just" need the fields, go for the Fieldset component instead.

<template>
  <k-form v-model="contact" @input="input" @submit="submit" :fields="{
    name: {
      label: 'Your Name',
      type: 'text',
      required: true
    },
    email: {
      label: 'Email Address',
      type: 'email',
      required: true
    },
    message: {
      label: 'Your Message',
      minlength: 140,
      required: true,
      type: 'textarea'
    }
  }" />
</template>

<script>
export default {
  data() {
    return {
      contact: {
        name: null,
        email: null,
        message: null
      }
    }
  },
  methods: {
    input() {
      // the data is automatically updated
      console.log(this.contact);
    },
    submit() {
      // let's send this thing to the server
      this.$api.post('/my/api', this.contact);
    }
  }
};
</script>

Props

fields

Object (default: null)

validate

Boolean (default: false)

If true, all form fields will show their validation status on the fly.

value (v-model)

Object (default: null)

Methods

focus(name)

Focus a specific field in the fieldset or the first one if no name is given

submit()

Submit the form dynamically

Events

input

Triggered whenever any field value changes

submit

Triggered when the form is submitted. This can be done in most inputs by hitting enter. It can also be triggered by a field component by firing a submit event. This will bubble up to the Form and trigger a submit there as well. This is used in the textarea component for example to link the cmd+enter shortcut to a submit.

Keyboard Shortcuts

The Form component automatically registers the cmd+s shortcut to submit the form.

CSS Class

.k-form