Validated

폼 필드의 유효성 상태를 링·메시지로 표시하는 래퍼

Validated#

폼 필드를 감싸 유효성 state 를 필드 둘레의 색 링과 아래 message 로 표시하는 프레젠테이션 래퍼입니다. pending 상태에서는 링이 그려지지 않고 메시지도 숨겨지며, invalid / valid 상태가 각 색 링을 적용합니다. Flutter / Web 1:1 동일 API 입니다.

Live Preview#

Web

필수 항목입니다.

Flutter

Loading Flutter...

class ValidatedDefaultExample extends StatelessComponent {
  const ValidatedDefaultExample({super.key});

  @override
  Component build(BuildContext context) {
    return div(
      styles: Styles(raw: {'width': '320px'}),
      [
        Validated(
          state: CoreValidationState.invalid,
          message: Text('필수 항목입니다.'),
          child: TextField(placeholder: Text('이름')),
        ),
      ],
    );
  }
}

class ValidatedDefaultExample extends StatelessWidget {
  const ValidatedDefaultExample({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 320,
      child: Validated(
        state: CoreValidationState.invalid,
        message: const Text('필수 항목입니다.'),
        child: TextField(placeholder: const Text('이름')),
      ),
    );
  }
}

사용법#

Validated(
  state: CoreValidationState.invalid,
  message: const Text('필수 항목입니다.'),
  child: TextField(placeholder: const Text('이름')),
)

Props#

파라미터	타입	기본값	설명
`state`	`CoreValidationState`	`pending`	유효성 상태 (`pending` / `valid` / `invalid`)
`message`	`Widget` / `Component?`	`null`	필드 아래 메시지 (`pending` 이면 숨김)
`child`	`Widget` / `Component?`	`null`	감싸는 폼 필드
`validatedStyle`	`CoreValidatedStyle?`	`null`	chrome / dimensional 단일 진입점