# Formulaire

LhForm + LhFormItem : validation du modèle (required / règles personnalisées), affichage des erreurs (role="alert"), propagation de aria-invalid aux contrôles enfants, et validate / resetFields sur l'ensemble du formulaire.

<template>
  <div style="max-width: 640px">
    <LhForm ref="form" :model="form" :rules="rules" label-width="80px">
      <LhFormItem prop="name" label="Nom" required>
        <LhInput v-model="form.name" placeholder="Saisissez le nom" />
      </LhFormItem>
      <LhFormItem prop="genre" label="Thème">
        <LhSelect v-model="form.genre" :options="genres" placeholder="Sélectionnez" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary" @click="submit">Envoyer</LhButton>
        <LhButton @click="reset">Réinitialiser</LhButton>
      </LhFormItem>
    </LhForm>
    <p class="demo-note">Résultat de l'envoi : {{ result }}</p>
    <p class="demo-note" style="margin-top: 16px">label-position="top" :</p>
    <LhForm :model="form2" label-position="top">
      <LhFormItem prop="name" label="Nom">
        <LhInput v-model="form2.name" placeholder="Étiquette en haut" />
      </LhFormItem>
    </LhForm>
    <p class="demo-note" style="margin-top: 16px">Formulaire en ligne (inline) :</p>
    <LhForm :model="form3" inline>
      <LhFormItem prop="name" label="Nom">
        <LhInput v-model="form3.name" placeholder="En ligne" />
      </LhFormItem>
      <LhFormItem prop="genre" label="Thème">
        <LhSelect v-model="form3.genre" :options="genres" placeholder="En ligne" />
      </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: 'Paysage' },
      { value: 'hua', label: 'Fleurs et oiseaux' },
    ],
    result: '(non envoyé)',
  }),
  methods: {
    submit() {
      const form = this.$refs.form
      form.validate().then((ok) => {
        this.result = ok ? 'Validation réussie ✓' : 'Validation échouée : le nom est obligatoire'
      })
    },
    reset() {
      this.$refs.form.resetFields()
      this.result = '(réinitialisé)'
    },
  },
}
</script>

# Form Props

Propriété	Description	Type	Valeur par défaut
model	Modèle de données (obligatoire)	`Record<string, unknown>`	—
rules	Règles de validation (clés = chemins des props)	`Record<string, LhFormRule[]>`	—
labelPosition	Position de l'étiquette	`'left' \\| 'right' \\| 'top'`	`'right'`
labelWidth	Largeur de l'étiquette	`string \\| number`	—
inline	Mise en page en ligne	`boolean`	`false`

# FormItem Props

Propriété	Description	Type	Valeur par défaut
prop	Chemin du champ dans model (chemins profonds `a.b` pris en charge)	`string`	—
label / required / rules	Étiquette, astérisque du caractère obligatoire, règles locales (fusionnées avec celles du form)	—	—

# Méthodes

Méthode	Description
`validate()`	Valide tous les champs (éléments enregistrés + éléments surchargés par rules) et renvoie une `Promise<boolean>`
`validateField(prop)`	Valide un seul champ
`resetFields()` / `resetField(prop)`	Restaure les valeurs initiales (instantané des clés de rules au montage)

Astuce

La propagation des échecs de validation vers les contrôles du formulaire est automatique : le contrôle s'injecte dans le contexte du LhFormItem et aria-invalid est rendu dès que errorMessage n'est pas vide, aucun branchement manuel n'est nécessaire.

← Téléversement Badge →