【Vue.js】動的フォームの作り方とバリデーション設計｜項目の追加・削除を柔軟に対応

<script setup>
import { ref } from 'vue'

const MAX = 5          // 追加できる項目の上限
let nextId = 2         // 次に付ける id

// 各項目に、固有の id を持たせる
const fields = ref([{ id: 1, name: '' }])

function addField() {
  if (fields.value.length >= MAX) return
  fields.value.push({ id: nextId++, name: '' })
}

function removeField(id) {
  if (fields.value.length <= 1) return   // 最後の1件は消さない
  fields.value = fields.value.filter(field => field.id !== id)
}
</script>

<template>
  <div v-for="field in fields" :key="field.id">
    <input v-model="field.name" placeholder="名前を入力">
    <button
      type="button"
      :disabled="fields.length <= 1"
      @click="removeField(field.id)"
    >
      削除
    </button>
  </div>

  <button type="button" :disabled="fields.length >= MAX" @click="addField">
    項目を追加
  </button>
</template>

<script setup>
import { ref, computed } from 'vue'

const MAX = 5
let nextId = 2
const fields = ref([{ id: 1, name: '' }])
const submitted = ref(false)   // 送信ボタンを押したあとだけ、エラーを見せる

function addField() {
  if (fields.value.length >= MAX) return
  fields.value.push({ id: nextId++, name: '' })
}
function removeField(id) {
  if (fields.value.length <= 1) return
  fields.value = fields.value.filter(field => field.id !== id)
}

// 項目ごとのエラーメッセージ（{ id: メッセージ }）
const errors = computed(() =>
  Object.fromEntries(
    fields.value.map(field => [
      field.id,
      field.name.trim() === '' ? '名前を入力してください' : ''
    ])
  )
)
const hasError = computed(() => Object.values(errors.value).some(msg => msg !== ''))

function onSubmit() {
  submitted.value = true
  if (hasError.value) return

  // 送信するデータの形を整える（前後の空白を除く）
  const payload = fields.value.map(field => field.name.trim())
  console.log(payload)
}
</script>

<template>
  <form @submit.prevent="onSubmit">
    <div v-for="field in fields" :key="field.id">
      <input v-model="field.name" placeholder="名前を入力">
      <button type="button" @click="removeField(field.id)">削除</button>
      <p v-if="submitted && errors[field.id]" class="error">
        {{ errors[field.id] }}
      </p>
    </div>

    <button type="button" @click="addField">項目を追加</button>
    <button type="submit">送信</button>
  </form>
</template>

npm install vee-validate yup @vee-validate/yup

<script setup>
import { useForm, useFieldArray, Field, ErrorMessage } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/yup'
import * as yup from 'yup'

// スキーマ：people という配列の各要素に、name が必須というルール
const schema = toTypedSchema(
  yup.object({
    people: yup
      .array()
      .of(
        yup.object({
          name: yup.string().required('名前は必須です')
        })
      )
      .min(1)
  })
)

const { handleSubmit } = useForm({
  validationSchema: schema,
  initialValues: { people: [{ name: '' }] }
})

// fields は { key, value, isFirst, isLast } の配列。push / remove で増減できる
const { fields, push, remove } = useFieldArray('people')

const onSubmit = handleSubmit(values => {
  console.log(values.people)
})
</script>

<template>
  <form @submit="onSubmit">
    <!-- key には、自動で付く field.key を使う -->
    <div v-for="(field, idx) in fields" :key="field.key">
      <Field :name="`people[${idx}].name`" placeholder="名前を入力" />
      <button type="button" @click="remove(idx)">削除</button>
      <ErrorMessage :name="`people[${idx}].name`" />
    </div>

    <button type="button" @click="push({ name: '' })">項目を追加</button>
    <button type="submit">送信</button>
  </form>
</template>