Function useForm

apps/wallet/src/composables/forms.composable.ts:15–163

(opts: {
  /**
   * The model to use for the form.
   */
  model: Ref<T>;
  /**
   * The submit function to call when the form is valid and submitted.
   *
   * @param model the model to submit
   * @returns
   */
  submit: (model: T) => Promise<void>;
  /**
   * Take a snapshot of the model for comparison.
   *
   * If not provided, the model will be stringified.
   */
  takeModelSnapshot?: (model: T) => string;
  /**
   * The form template ref to use for validation.
   *
   * If not provided, defaults to 'form'.
   */
  formTemplateRef?: string;
  /**
   * Additional validation rules to apply to the form.
   *
   * If not provided, only the form's built-in validation will be used.
   */
  isValid?: (model: T) => Promise<FieldWithError[]> | FieldWithError[];
})

}

export const useForm = <T>(opts: {
  /**
   * The model to use for the form.
   */
  model: Ref<T>;
  /**
   * The submit function to call when the form is valid and submitted.
   *
   * @param model the model to submit
   * @returns
   */
  submit: (model: T) => Promise<void>;
  /**
   * Take a snapshot of the model for comparison.
   *
   * If not provided, the model will be stringified.
   */
  takeModelSnapshot?: (model: T) => string;
  /**
   * The form template ref to use for validation.
   *
   * If not provided, defaults to 'form'.
   */
  formTemplateRef?: string;
  /**
   * Additional validation rules to apply to the form.
   *
   * If not provided, only the form's built-in validation will be used.
   */
  isValid?: (model: T) => Promise<FieldWithError[]> | FieldWithError[];
}) => {
  const form = useTemplateRef<VFormValidation>(opts.formTemplateRef ?? 'form');
  const valid = ref(true);
  const fieldsWithErrors = ref<Array<FieldWithError>>([]);
  const modelSnapshot = ref<string>('');
  const submitting = ref(false);
  const edited = ref(false);
  const submitted = ref(false);
  const initialModel = ref(deepClone(opts.model.value)) as Ref<T>;

  const model = computed({
    get: () => opts.model.value,
    set: value => {
      opts.model.value = value;
    },
  });

  const additionalValidationCheck = opts.isValid ?? (() => Promise.resolve([]));

  const takeModelSnapshot =
    opts.takeModelSnapshot ??
    function (model: T) {
      return JSON.stringify(transformData(model));
    };

  const additionalFieldErrors = computed(() => {
    return fieldsWithErrors.value.filter(field => field.isCustomValidation);
  });