Form

폼 유효성 검증 컴포넌트

Form#

여러 입력 필드를 묶어 유효성 검증을 수행하는 폼 컴포넌트입니다.

사용법#

CouiForm(
  onSubmit: handleSubmit,
  child: Column(
    children: [
      CouiFormField(
        label: '이름',
        validator: (value) =>
            value?.isEmpty ?? true ? '이름을 입력하세요' : null,
        child: CouiInput(
          onChanged: handleNameChange,
          placeholder: '홍길동',
        ),
      ),
      CouiFormField(
        label: '이메일',
        validator: (value) =>
            value?.contains('@') ?? false ? null : '올바른 이메일을 입력하세요',
        child: CouiInput(
          type: InputType.email,
          onChanged: handleEmailChange,
        ),
      ),
      CouiButton(
        onPressed: handleSubmit,
        child: Text('제출'),
      ),
    ],
  ),
)

Form(
  onSubmit: handleSubmit,
  children: [
    FormField(
      label: '이름',
      validator: (value) =>
          value?.isEmpty ?? true ? '이름을 입력하세요' : null,
      child: Input(placeholder: '홍길동'),
    ),
    FormField(
      label: '이메일',
      validator: (value) =>
          value?.contains('@') ?? false ? null : '올바른 이메일을 입력하세요',
      child: Input(type: InputType.email),
    ),
    Button(onClick: handleSubmit, child: Text('제출')),
  ],
)

Props / Parameters#

CouiForm#

속성	타입	기본값	설명
`onSubmit`	`VoidCallback?`	`null`	폼 제출 콜백
`autovalidateMode`	`AutovalidateMode`	`disabled`	자동 유효성 검증 모드
`child`	`Widget`	필수	폼 내용

CouiFormField#

속성	타입	기본값	설명
`label`	`String?`	`null`	필드 라벨
`validator`	`FormFieldValidator<String>?`	`null`	유효성 검증 함수
`required`	`bool`	`false`	필수 입력 표시
`helperText`	`String?`	`null`	도움말 텍스트
`child`	`Widget`	필수	입력 위젯

변형 (Variants)#

실시간 유효성 검증#

CouiForm(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  child: CouiFormField(
    label: '비밀번호',
    validator: (value) {
      if (value == null || value.length < 8) {
        return '8자 이상 입력하세요';
      }
      return null;
    },
    child: CouiInput(type: InputType.password),
  ),
)