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를 렌더링하므로 수동으로 바인딩할 필요가 없습니다.