@baloise/web-app-validators-vue v3.11.4

@baloise/web-app-validators-vue

Installation

For Vue we use the libary VeeValidate togehter with the Composition API.

First install VeeValidate (Version >= 4.x.x).

npm install @baloise/web-app-validators-vue vee-validate@next

Define i18n validators

In this section we change the return type of our BalValidators into the the translated texts. Pass your i18n translation function to the useValidator helper and then use the returned helper function createValidator to map the BalValidators with your translations.

import { BalValidators } from '@baloise/design-system-components'
import { useValidator, ValidatorFn } from '@baloise/design-system-components-vue'
import { i18n } from '../../plugins/i18n.plugin'

export { rules } from '@baloise/design-system-components-vue'

const { createValidator } = useValidator(i18n.global.t)

export const isRequired = (): ValidatorFn => createValidator(BalValidators.isRequired(), 'validator.required')

Create form

First we define our template like this.

<form @submit.prevent="submit">
  <BalField expanded :disabled="isFirstNameDisabled">
    <BalFieldLabel required> {{ $t('form.firstName.label') }} </BalFieldLabel>
    <BalFieldControl>
      <BalInput
        v-model="firstName"
        :name="firstNameName"
        :placeholder="$t('form.firstName.placeholder')"
        :disabled="isFirstNameDisabled"
      ></BalInput>
    </BalFieldControl>
    <BalFieldMessage color="danger" v-if="!isFirstNameDisabled"> {{ firstNameErrorMessage }} </BalFieldMessage>
  </BalField>
</form>

Now we have to define the logic of our form with the help of VeeValidate.

The helper function validators helps us to combine validators and to use the possibility to dynamically disable fields and their validation rules.

import { defineComponent, ref } from 'vue'
import { rules } from '@baloise/design-system-components-vue'
import { useField, useForm, useIsFormValid } from 'vee-validate'
import { isRequired } from '../helpers/validators'

export default defineComponent({
  setup() {
    const { validate } = useForm()
    const isFormValid = useIsFormValid()

    const isFirstNameDisabled = ref(false)
    const firstnameField = useField('firstname', rules(isFirstNameDisabled, [
      isRequired(),
    ]))

    async function submit() {
      const { valid, errors } = await validate()
      ...
    }

    function disable() {
      isFirstNameDisabled.value = !isFirstNameDisabled.value
    }

    return {
      firstname: firstnameField.value,
      firstNameName: firstnameField.name,
      firstnameErrorMessage: firstnameField.errorMessage,
      isFirstNameDisabled,
      isFormValid, disable, submit,
    }
  },
})