입문

요즘 취미 때문에 Vue.js, CompositionAPI를 시도하고 있습니다.
그 일환으로, 가능한 한 라이브러리를 사용하지 않으려고 폼을 설치했기 때문에 보도에 남기고 싶었다.

기록 업데이트

2021/06/29: event.target 참조 방법 수정

창 개요

이번에 만든 표는 간단한'사용자 제작 표'다.
입력 필드에는 사용자 이름과 전자 메일 주소 두 개가 있습니다.

또한 입력 값에 문제가 있으면 다음과 같이 오류 메시지가 표시됩니다.

생성된 소스 코드

이번에 만든 소스 코드는 다음 Github 저장소에서 공개됩니다.
Ushinji/vue-form-sample

필드/useField 입력

행위

사용자가 폼 구성 요소를 만드는 데 있어서 먼저 입력 필드에서 설명합니다.

입력 필드는 입력 속성과 오류 메시지 두 개로 구성되어 있습니다.
입력 인증이 잘못되면 오류 메시지가 표시됩니다.이번 검증 오류의 판정 조건은'사용자 이름이 빈 칸이 아니다'이다.
그러나 입력 필드의 초기 상태가 빈 칸이어서 오류로 판정되었습니다.사용자의 입장에서 볼 때 아무것도 조작하지 않았지만 갑자기 오류가 발생한 것은 좋은 인상이 아니다.
따라서 이 폼에서 초기 상태는 검증 오류가 아니라 사용자가 입력 필드를 조작한 후에 오류를 판단하기 시작합니다.구체적인 오류 판정 시작 시간은 입력 필드의 focus가 벗어났을 때(Blur)입니다.

실시

이상의 내용을 바탕으로 여기서부터 설치에 대해 설명합니다.
먼저 입력 필드의 논리를 정의했습니다useField.

// useField.ts
import { ref, computed } from 'vue';

const useField = (
  initialValue: string,
  validate: (value: string) => boolean = () => false
) => {

  const value = ref(initialValue);
  const isTouched = ref(false);

  const error = computed(() => {
    return !validate(value.value);
  });

  const onInput = (event: Event) => {
    const { target } = event;
    if (target instanceof HTMLInputElement) {
      value.value = target.value;
    }
  };

  const onBlur = () => {
    isTouched.value = true;
  };

  return {
    props: { value, onInput, onBlur },
    meta: {
      isTouched,
      error,
    },
  };
};

export default useField;

useFiled는 입력 필드의 초기 값과 검증 표현식을 입력하여 입력 필드의 논리를 되돌려줍니다.
useField 관리의 상태는 입력 값(value), 사용자 입력 필드의 조작 판정(isTouched), 검증 오류 판정(error) 세 가지입니다.그것들은ref와computed를 이용하여 다시 활성화된 값으로 정의합니다.
입력한 값의 값은 onInput 함수로 업데이트됩니다.onInput 함수는 상응하는 입력 필드@input에서 지정되며, 입력 값의 변경을 촉발로 하고, onIput 함수는 화를 내고value를 업데이트합니다.
또한 isTouched 값은 onBlur 함수로 업데이트됩니다.onBlur는 해당 입력 필드@blur로 지정되며, 입력 필드의 focus가 벗어날 때 isTouched를 업데이트합니다.

<!-- useFieldのロジック指定方法 -->
<input :value="value" @input="onInput" @blur="onBlur" />

또한useField의 반환값은 props과 meta의 이름으로 구조화되었다.props의 경우 input에서 지정한 속성을 해당 입력 필드에 요약합니다.또 meta 오류 등 이른바 메타 정보를 수집했다.

useField를 사용하여 Form 구현

앞에서 설명한useField를 사용하여 Form의 입력 필드를 실현하면 코드는 다음과 같습니다.

<!-- UserCreateForm.vue -->
<template>
<div class="field">
  <label class="label" for="user-name">ユーザー名</label>
  <div class="control">
    <input
      id="user-name"
      name="user-name"
      type="text"
      :value="userNameField.props.value.value"
      @input="userNameField.props.onInput"
      @blur="userNameField.props.onBlur"
    />
    <p
      class="help is-danger"
      v-show="
        userNameField.meta.isTouched.value && userNameField.meta.error.value
      "
    >
     ユーザー名を入力してください。
    </p>
  </div>
</div>
</template>

<script lang="ts">
import { createComponent } from '@vue/composition-api';
import useField from './useField';

export default createComponent({
  setup() {
    // ユーザー名フィールドの定義
    const userNameField = useField('', (value: string) => {
      return value.length > 0;
    });
    return { userNameField };
  },
});
</script>

<script>에서 사용자 이름 필드 정보userNameField를 초기화합니다.그리고 필요한 입력 속성에 필드 정보를 설정합니다.
또한 오류 메시지는 초점이 Input에서 벗어난 후 오류를 검증하는 상황에서 표시되는 것으로 정의됩니다.

제출 프로세스 구현

우선 Form<script> 부분의 코드입니다.폼에 사용되는 제출 방법onSubmit과 폼 오류 판정을 정의합니다.

<script lang="ts">
import { defineComponent } from 'vue';
import useUserCreateForm from './composition';

export default defineComponent({
  setup() {
    // 各フィールドの定義(バリデーションメソッドの詳細は後述する)
    const userNameField = useField('', presenceValidator);
    const emailField = useField('', emailValidator);

    // フォームのエラー判定。各フィールドにエラー情報を元に判定する。
    const error = computed(() => {
      return userNameField.meta.error.value || emailField.meta.error.value;
    });

    // submitメソッド。各フィールドの値を使い、サーバーにPOSTリクエストを送信する。
    const onSubmit = async () => {
      if (error.value) {
        return;
      }
      // 今回はサーバーリクエストは行っていない
      console.log(userNameField.props.value.value, emailField.props.value.value);
    };

    // 各フィールド情報とフォーム情報をtemplate層に渡す
    return {
      userNameField,
      emailField,
      onSubmit,
      meta: {
        error,
      },
    };
  },
});
</script>

상술한 각 필드 검증 방법은 다음과 같다.

export const presenceValidator = (value: string) => {
  return value.length > 0;
};

export const emailValidator = (value: string) => {
  const re = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
  return re.test(value);
};

다음으로 표의 <template>층은 다음과 같다.<script> 레이어에 정의된 onSubmit 은 보내기 버튼을 클릭할 때 실행되는 것으로 정의됩니다.
또한 보내기 단추 :disabled 에서 전체 폼의 오류 판정을 지정함으로써 오류 시 단추 (disalbed 상태) 를 클릭할 수 없습니다.

<template>
  <div class="container">
    <form @submit.prevent>

      <!-- 各フィールドは省略 -->

      <div class="field">
        <p class="control">
          <button
            class="button is-success"
            type="submit"
            @click="onSubmit"
            :disabled="meta.error.value"
          >
            作成する
          </button>
        </p>
      </div>
    </form>
  </div>
</template>

끝날 때

이번엔 Vue야.js의 Composition API를 사용한 폼 구현을 소개했다.
이번 설치는 아래 두 개의 라이브러리를 참고하여 설치했다.

vue-use-form

redux-form

평소에 React & hooks로 전단 코드를 쓰기 때문에 React Like의 인코딩인 것 같습니다.
어쨌든 읽은 사람에게 참고가 된다면 좋겠다.