Formulaire

LhForm et LhFormItem fournissent la liaison de modèle, la validation des champs obligatoires et l'affichage des erreurs de champ.

Utilisation de base

Utilisation de base

* Nom

* E-mail

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { LhForm, LhFormItem, LhInput, LhButton, LhMessage } from '@lh-ui/vue3'

const formRef = ref()
const formModel = reactive({
  name: '',
  email: '',
})

const formRules = {
  name: [{ required: true, message: 'Saisissez votre nom' }],
  email: [{ required: true, message: 'Saisissez votre e-mail' }],
}

async function submitForm() {
  const valid = await formRef.value.validate()
  if (valid) {
    LhMessage.success('Envoyé avec succès')
    console.log('Envoyé avec succès', formModel)
  }
}

function resetForm() {
  formRef.value?.resetFields()
}
</script>

<template>
  <LhForm ref="formRef" :model="formModel" :rules="formRules" label-width="80px">
    <LhFormItem prop="name" label="Nom" required>
      <LhInput v-model="formModel.name" placeholder="Saisissez votre nom" />
    </LhFormItem>
    <LhFormItem prop="email" label="E-mail" required>
      <LhInput v-model="formModel.email" placeholder="Saisissez votre e-mail" />
    </LhFormItem>
    <LhFormItem>
      <LhButton type="primary" @click="submitForm">Valider</LhButton>
      <LhButton plain @click="resetForm" style="margin-left: 8px">Réinitialiser</LhButton>
    </LhFormItem>
  </LhForm>
</template>

<script>
import { LhForm, LhFormItem, LhInput, LhButton, LhMessage } from '@lh-ui/vue3'

export default {
  components: { LhForm, LhFormItem, LhInput, LhButton },
  data() {
    return {
      formModel: { name: '', email: '' },
      formRules: {
        name: [{ required: true, message: 'Saisissez votre nom' }],
        email: [{ required: true, message: 'Saisissez votre e-mail' }],
      },
    }
  },
  methods: {
    async submitForm() {
      const valid = await this.$refs.formRef.validate()
      if (valid) {
        LhMessage.success('Envoyé avec succès')
        console.log('Envoyé avec succès', this.formModel)
      }
    },
    resetForm() { this.$refs.formRef?.resetFields() },
  },
}
</script>

<template>
  <LhForm ref="formRef" :model="formModel" :rules="formRules" label-width="80px">
    <LhFormItem prop="name" label="Nom" required>
      <LhInput v-model="formModel.name" placeholder="Saisissez votre nom" />
    </LhFormItem>
    <LhFormItem prop="email" label="E-mail" required>
      <LhInput v-model="formModel.email" placeholder="Saisissez votre e-mail" />
    </LhFormItem>
    <LhFormItem>
      <LhButton type="primary" @click="submitForm">Valider</LhButton>
      <LhButton plain @click="resetForm">Réinitialiser</LhButton>
    </LhFormItem>
  </LhForm>
</template>

Thème personnalisé

Le formulaire peut adopter une palette thématique personnalisée.

Formulaire sur le thème 青花瓷 (porcelaine bleue et blanche)

Nom

<script setup lang="ts">
import { reactive } from 'vue'
import { LhConfigProvider, LhForm, LhFormItem, LhInput, LhButton } from '@lh-ui/vue3'

const themeForm = reactive({ name: '' })
const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
}
</script>

<template>
  <!-- Thème porcelaine bleue et blanche -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhForm :model="themeForm" label-width="80px">
      <LhFormItem label="Nom">
        <LhInput v-model="themeForm.name" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary">Valider</LhButton>
      </LhFormItem>
    </LhForm>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhForm, LhFormItem, LhInput, LhButton } from '@lh-ui/vue3'

export default {
  data() {
    return {
      themeForm: { name: '' },
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
      },
    }
  },
}
</script>

<template>
  <!-- Thème porcelaine bleue et blanche -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhForm :model="themeForm" label-width="80px">
      <LhFormItem label="Nom">
        <LhInput v-model="themeForm.name" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary">Valider</LhButton>
      </LhFormItem>
    </LhForm>
  </LhConfigProvider>
</template>

Internationalisation

Formulaire internationalisé

姓名

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { LhConfigProvider, LhForm, LhFormItem, LhInput, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const formModel = reactive({ name: '' })
</script>

<template>
  <!-- Configuration de l'internationalisation -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhForm :model="formModel" label-width="80px">
      <LhFormItem :label="locale === 'zh-CN' ? '姓名' : 'Name'">
        <LhInput v-model="formModel.name" :placeholder="locale === 'zh-CN' ? '请输入姓名' : 'Enter name'" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary">{{ locale === 'zh-CN' ? '提交' : 'Submit' }}</LhButton>
      </LhFormItem>
    </LhForm>
  </LhConfigProvider>
</template>

<script>
import { LhConfigProvider, LhForm, LhFormItem, LhInput, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  data() {
    return {
      locale: 'zh-CN',
      formModel: { name: '' },
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- Configuration de l'internationalisation -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhForm :model="formModel" label-width="80px">
      <LhFormItem :label="locale === 'zh-CN' ? '姓名' : 'Name'">
        <LhInput v-model="formModel.name" :placeholder="locale === 'zh-CN' ? '请输入姓名' : 'Enter name'" />
      </LhFormItem>
      <LhFormItem>
        <LhButton type="primary">{{ locale === 'zh-CN' ? '提交' : 'Submit' }}</LhButton>
      </LhFormItem>
    </LhForm>
  </LhConfigProvider>
</template>

Position des étiquettes et disposition en ligne

label-position change l'alignement des étiquettes (left / right / top) ; inline dispose les champs du formulaire horizontalement.

label-position / inline

* Nom

Ville

<script setup lang="ts">
import { reactive } from 'vue'
const fpModel = reactive({ name: '', city: '' })
</script>

<template>
  <LhForm :model="fpModel" label-position="top" inline>
    <LhFormItem prop="name" label="Nom" required>
      <LhInput v-model="fpModel.name" />
    </LhFormItem>
    <LhFormItem prop="city" label="Ville">
      <LhInput v-model="fpModel.city" />
    </LhFormItem>
  </LhForm>
</template>

<script>
export default {
  data() {
    return {
      fpModel: { name: '', city: '' },
    }
  },
}
</script>

<template>
  <LhForm :model="fpModel" label-position="top" inline>
    <LhFormItem prop="name" label="Nom" required>
      <LhInput v-model="fpModel.name" />
    </LhFormItem>
    <LhFormItem prop="city" label="Ville">
      <LhInput v-model="fpModel.city" />
    </LhFormItem>
  </LhForm>
</template>

LhForm Props

Propriété	Description	Type	Valeur par défaut
model	Objet de données du formulaire	{ [x: string]: unknown; }	—
rules	Règles de validation des champs	{ [x: string]: LhFormRule[]; }	—
labelPosition	Position des étiquettes	"left" | "right" | "top"	'right'
labelWidth	Largeur des étiquettes	string | number	—
inline	Utiliser une disposition en ligne	boolean	false
sx	Propriétés de mise en page rapide sx	LhSxProps	—

LhFormItem Props

Propriété	Description	Type	Valeur par défaut
prop	Chemin du champ dans model, user.name est pris en charge	string	—
label	Texte de l'étiquette	string	—
required	Champ obligatoire	boolean	false
rules	Règles de validation du champ, prioritaires sur les rules de Form	LhFormRule[]	—

Règles de validation

type LhFormRule = {
  required?: boolean
  message?: string
  validator?: (value: unknown, model: Record<string, unknown>) => string | undefined
}

LhForm expose les méthodes validate() et resetFields().

Accessibilité

• Le message d'erreur de LhFormItem porte role="alert", afin que les lecteurs d'écran l'annoncent immédiatement en cas d'échec de la validation
• La zone de contenu est associée au message d'erreur via aria-describedby, ce qui permet aux technologies d'assistance de restituer la correspondance « champ → erreur » ; cette association est automatiquement retirée en l'absence d'erreur
• Les contrôles de formulaire (Input / Select / Checkbox / Radio / Switch / Slider / InputNumber / DatePicker / TimePicker / Cascader) lisent l'état de validation du LhFormItem auquel ils appartiennent et sont marqués aria-invalid en cas d'échec de la validation, marqueur automatiquement retiré une fois l'erreur résolue ; un contrôle placé en dehors d'un LhFormItem n'est pas concerné
• Le texte de repli pour les champs obligatoires provient du pack de langue form.required (en français « Ce champ est obligatoire ») et change avec la langue configurée dans ConfigProvider ; un message défini dans rules est prioritaire

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/form/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhFormLabelPosition

export type LhFormLabelPosition = 'left' | 'right' | 'top'

LhFormProps

export interface LhFormProps {
  model: Record<string, unknown>
  rules?: Record<string, LhFormRule[]>
  labelPosition?: LhFormLabelPosition
  labelWidth?: string | number
  inline?: boolean
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhFormItemProps

export interface LhFormItemProps {
  prop?: string
  label?: string
  required?: boolean
  rules?: LhFormRule[]
}

LhFormRule _{(provient de @lh-ui/share/core/form)}

export interface LhFormRule {
  required?: boolean
  message?: string
  validator?: (value: unknown, model: Record<string, unknown>) => string | undefined
}