UIForm

UIForm

A form component with validation and submission handling.

<template>
  <UIForm
    ref="formRef"
    :model="formData"
    :rules="formRules"
    @submit="handleSubmit"
  >
    <UIFormItem label="Username" prop="username">
      <UIInput v-model:value="formData.username" />
    </UIFormItem>

    <UIFormItem label="Email" prop="email">
      <UIInput v-model:value="formData.email" type="email" />
    </UIFormItem>

    <UIFormItem>
      <UIButton type="primary" html-type="submit">Submit</UIButton>
    </UIFormItem>
  </UIForm>
</template>

<script setup lang="ts">
interface FormData {
  username: string
  email: string
}

const formRef = ref()
const formData = ref<FormData>({
  username: '',
  email: ''
})

const formRules = {
  username: [
    { required: true, message: 'Please enter username' }
  ],
  email: [
    { required: true, message: 'Please enter email' },
    { type: 'email', message: 'Please enter valid email' }
  ]
}

const handleSubmit = async () => {
  try {
    await formRef.value.validate()
    console.log('Form submitted:', formData.value)
  } catch (errors) {
    console.error('Validation failed:', errors)
  }
}
</script>

Props

• model (object): Form data object
• rules (object): Validation rules object
• labelWidth (number | string): Width of form labels
• labelAlign (‘left’ | ‘right’): Alignment of form labels
• labelPlacement (‘left’ | ‘top’): Placement of form labels
• size (‘small’ | ‘medium’ | ‘large’): Form size
• disabled (boolean): Disable all form items
• showFeedback (boolean): Show validation feedback
• validateOnRuleChange (boolean): Validate when rules change
• inline (boolean): Display form items inline

Events

• submit: Emitted when form is submitted
• validate: Emitted after validation
• reset: Emitted when form is reset

Methods

• validate(): Validate all form items
• validateField(prop: string): Validate specific form item
• resetFields(): Reset all form items
• clearValidate(props?: string[]): Clear validation state

FormItem Props

• label (string): Form item label
• prop (string): Form item property
• required (boolean): Mark as required
• rules (array | object): Validation rules
• showMessage (boolean): Show validation message
• validateStatus (‘success’ | ‘warning’ | ‘error’): Validation status
• help (string): Help message