useForm, useControl

useForm и useControl - хелперы для работы с формами и валидацией

useForm

useForm используется в компонентах форм, для задания валидации и всплывающих submit/reset событий

Аргументы

context

• type: SetupContext
• required: true

Контекст setup функции

options

• type: FormOptions<T, Vargs>
• default: {}

interface FormOptions<
  T extends Object,
  Vargs extends ValidationArgs<T> = ValidationArgs<T>,
> {
  form?: T | Ref<T> | ToRefs<T>; // Обьект формы по которому проводится валидация
  rules?: Vargs | Ref<Vargs>; // Правила для валидации формы
  bubble?: boolean; // Должно ли событие всплывать, так же является дефолтным значением в `onSubmit` и `onReset`
  vuelidateGlobalConfig?: GlobalConfig; // Конфиг для `useVuelidate`
  reset?: () => void; // Функция вызываемая в `onReset` для сброса формы изнутри
}

Return

v

Обьект валидации, результат вызова useVuelidate(rules?, form?, vuelidateGlobalConfig)

onSubmit

• type: ({ bubble?: boolean, data?: any }) => Promise<boolean>

Функция для вызова submit, так же она через provide доступна дочерним компонентам

Аргументы

bubble

• type: boolean
• default: options.bubble

Должна ли вызываться родительская функция сабмита

data

• type: any
• default: null

Любые данные, которые нужно отправить вместе с событием submit(@submit="(form, data) => {}")

Return

• type: Promise<boolean>

Асинхронно возвращается состояние валидации текущей формы(не рекурсивно)

onReset

• type: ({ bubble?: boolean, data?: any }) => Promise<void>

Функция для вызова reset, так же она через provide доступна дочерним компонентам

Аргументы

bubble

• type: boolean
• default: options.bubble

Должна ли вызываться родительская функция сброса

data

• type: any
• default: null

Любые данные, которые нужно отправить вместе с событием reset(@reset="(data) => {}")

parentOnSubmit

Функция полученная из provide

parentOnReset

Функция полученная из provide

Использование

<template>
  <form
    @submit.prevent="onSubmit"
    @reset.prevent="onReset"
  >
    <div>
      <input
        v-model.lazy="$v.name.$model"
        placeholder="Name"
      >

      <span v-if="$v.name.$error">
        {{ $v.name.$errors[0].messages }}
      </span>
    </div>

    <div>
      <input
        v-model.lazy="$v.email.$model"
        type="email"
        placeholder="Email"
      >

      <span v-if="$v.email.$error">
        {{ $v.email.$errors[0].messages }}
      </span>
    </div>

    <div>
      <button type="submit">
        Submit
      </button>

      <button type="reset">
        Reset
      </button>
    </div>
  </form>
</template>

import Vue from 'vue';
import { email, minLength, required } from '@vuelidate/validators';
import { ref, computed } from '@vue/composition-api';

import { useForm } from '#sf/composition/form';

const defaultForm = () => ({
  name: '',
  email: '',
});

export default Vue.extend({
  setup(props, context) {
    const form = ref(defaultForm());
    const reset = () => {
      form.value = defaultForm();
    };

    const rules = computed(() => ({
      name: {
        minLength: minLength(4),
        required,
      },

      email: {
        email,
        required,
      },
    }));

    const {
      v,
      onSubmit,
      onReset,
    } = useForm(context, { rules, form, reset });

    return {
      $v: v,
      onSubmit,
      onReset,
    };
  },
});

useControl

useControl - упрощенная версия useForm для использования в компонентах контролов

Аргументы

context

• type: SetupContext
• required: true

Контекст setup функции

options

• type: ControlOptions
• default: {}

interface ControlOptions {
  bubble?: boolean; // Должно ли событие всплывать, так же является дефолтным значением в `onSubmit` и `onReset`
}

Return

onSubmit

• type: ({ bubble?: boolean, data?: any }) => true

Функция для вызова submit

Аргументы

bubble

• type: boolean
• default: options.bubble

Должна ли вызываться родительская функция сабмита

data

• type: any
• default: null

Любые данные, которые нужно отправить вместе с событием submit(@submit="(form, data) => {}")

Return

• type: true

onReset

• type: ({ bubble?: boolean, data?: any }) => void

Функция для вызова reset

Аргументы

bubble

• type: boolean
• default: options.bubble

Должна ли вызываться родительская функция сброса

data

• type: any
• default: null

Любые данные, которые нужно отправить вместе с событием reset(@reset="(data) => {}")

parentOnSubmit

Функция полученная из provide

parentOnReset

Функция полученная из provide