نموذج 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	التسمية، وعلامة required، والقواعيد المحلية (تُدمج مع قواعد form)	—	—

الطرق

طريقة	الوصف
validate()	التحقق من جميع الحقول (العناصر المسجَّلة + عناصر تجاوز rules)، ويُعيد Promise<boolean>
validateField(prop)	التحقق من حقل واحد
resetFields() / resetField(prop)	العودة إلى القيم الأولية (تُلتقط لقطة عند التركيب وفق مفاتيح rules)

تلميح

ربط فشل التحقق لعناصر النموذج تلقائي: يُحقن عنصر التحكم في سياق LhFormItem، وعندما لا يكون errorMessage فارغاً يُعرض aria-invalid دون الحاجة إلى ربط يدوي.