Forms

Building easy forms in Vue

With the Vue integration of bitlibs you can easily create forms for creating new instances of Datamodels or editing existing ones, validating them and saving them. There are a couple of steps you need to take:

1. Create Vue components for every field type you need.
2. Register the Vue component to use for each field type with the FieldProvider class.
3. Use the VueField component to render the correct Vue component for a given model field.

These steps are explained in more detail in the following sections

Create Vue components

You have to create your own Vue components, with the help of the FieldMixin provided by bitlibs. This mixin gives you functionality for getting and settings the field's current value and handling any validation errors. It connects your component directly to an instance of a field class on your model.

An example textfield component:

<template>
  <label v-if="field.getConfig('label')" :for="field.getKey()">
    {{ field.getConfig('label')) }} <span v-if="isRequired()">*</span>
  </label>
  <div v-if="error !== null">
    {{ error.getShort() }}
  </div>
  <input
    type="text"
    :value="value"
    :name="field.getKey()"
    :placeholder="field.getConfig('placeholder')"
    :id="field.getKey()"
    :disabled="!isEnabled()"
    :maxlength="maxLength"

    @change="onChange"
    @input="onInput"
    @keyup.enter="onEnter"
  >
</template>

<script>
import {forms} from 'bitlibs';

export default {
  name: 'text-field',
  mixins: [forms.fields.FieldMixin]
}
</script>

Register Vue components

Once you created Vue components for all field types you want to support, you have to register them with bitlibs so that the VueField component knows which Vue component to render for which field type.

import {forms} from 'bitlibs';
import * as fields from '/src/components/forms/fields';

const fieldProvider = new forms.fields.FieldProvider();
fieldProvider.registerField("text", fields.TextField);
fieldProvider.setDefault(fields.TextField);

The FieldProvider class is a Singleton class.

Build forms using VueField

Now the only thing left to do is build your actual form components using the provided VueField component. Bitlibs provides the FormMixin class for supporting functionality. This mixin defines a 'model' property which should be the instance of the model for which to render field components. This is an example LoginForm component, which assumes you have some kind of SubmitButton component:

<template>
  <div>
    <div class="row" v-for="error in nonFieldErrors">
      <div class="col-s-12">
        <span class="error-message">{{ error.getShort() }}</span>
      </div>
    </div>
    <div class="row">
      <div class="col-s-12">
        <VueField
          :parent="this"
          :field='model.getField("username")'
        />
      </div>
    </div>
    <div class="row">
      <div class="col-s-12">
        <VueField
          :parent="this"
          :field='model.getField("password")'
        />
      </div>
    </div>
    <div class="row">
      <div class="col-s-12">
        <SubmitButton
          label="Login"
          @submit="submitForm"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {forms} from 'bitlibs';
import SubmitButton from '/src/components/forms/SubmitButton';

export default {
  name: 'login-form',
  mixins: [forms.FormMixin],
  components: {
    VueField: forms.fields.VueField,
    SubmitButton
  },
};
</script>