Form フォーム

LhForm + LhFormItem の組み合わせです。モデルバリデーション（required / カスタムルール）、エラー表示（role="alert"）、子コントロールの aria-invalid 連動、全体の validate / resetFields を備えます。

フォームバリデーション

<template>
  <div style="max-width: 640px">
    <LhForm ref="form" :model="form" :rules="rules" label-width="80px">
      <LhFormItem prop="name" label="氏名" required>
        <LhInput v-model="form.name" placeholder="氏名を入力してください" />
      </LhFormItem>
      <LhFormItem prop="genre" label="題材">
        <LhSelect v-model="form.genre" :options="genres" placeholder="選択してください" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary" @click="submit">送信</LhButton>
        <LhButton @click="reset">リセット</LhButton>
      </LhFormItem>
    </LhForm>
    <p class="demo-note">送信結果：{{ result }}</p>
    <p class="demo-note" style="margin-top: 16px">label-position="top"：</p>
    <LhForm :model="form2" label-position="top">
      <LhFormItem prop="name" label="氏名">
        <LhInput v-model="form2.name" placeholder="ラベルを上部に配置" />
      </LhFormItem>
    </LhForm>
    <p class="demo-note" style="margin-top: 16px">inline のインラインフォーム：</p>
    <LhForm :model="form3" inline>
      <LhFormItem prop="name" label="氏名">
        <LhInput v-model="form3.name" placeholder="インライン" />
      </LhFormItem>
      <LhFormItem prop="genre" label="題材">
        <LhSelect v-model="form3.genre" :options="genres" placeholder="インライン" />
      </LhFormItem>
    </LhForm>
  </div>
</template>

<script>
export default {
  data: () => ({
    form: { name: '', genre: '' },
    form2: { name: '' },
    form3: { name: '', genre: '' },
    rules: { name: [{ required: true, message: '' }] },
    genres: [
      { value: 'shan', label: '山水' },
      { value: 'hua', label: '花鳥' },
    ],
    result: '（未送信）',
  }),
  methods: {
    submit() {
      const form = this.$refs.form
      form.validate().then((ok) => {
        this.result = ok ? 'バリデーション成功 ✓' : 'バリデーション失敗：氏名は必須です'
      })
    },
    reset() {
      this.$refs.form.resetFields()
      this.result = '（リセット済み）'
    },
  },
}
</script>

Form Props

プロパティ	説明	型	デフォルト値
model	データモデル（必須）	Record<string, unknown>	—
rules	バリデーションルール（キーは prop のパス）	Record<string, LhFormRule[]>	—
labelPosition	ラベルの位置	'left' \| 'right' \| 'top'	'right'
labelWidth	ラベルの幅	string \| number	—
inline	インラインレイアウト	boolean	false

FormItem Props

プロパティ	説明	型	デフォルト値
prop	model のフィールドパスに対応（a.b の深いパスをサポート）	string	—
label / required / rules	ラベル、必須の星印、ローカルルール（form のルールとマージ）	—	—

メソッド

メソッド	説明
validate()	全フィールドをバリデーション（登録項目 + rules で上書きされた項目）し、Promise<boolean> を返す
validateField(prop)	単一フィールドをバリデーション
resetFields() / resetField(prop)	初期値に戻す（マウント時に rules のキーでスナップショットを取得）

ヒント

フォームコントロールのバリデーション失敗の連動は自動的です。コントロールが LhFormItem のコンテキストに注入され、errorMessage が空でなければ aria-invalid がレンダリングされるため、手動でのバインドは不要です。