시그널 폼

시그널 폼은 Angular 애플리케이션의 폼 상태를 시그널로 연결해서 반응형으로 구성하는 방식을 의미합니다. 양방향 바인딩이 자동으로 연결되며, 폼 필드에 접근할 때 타입 검사가 적용되며, 스키마 기반으로 유효성을 검사하기 때문에 직관적인 폼을 구성할 수 있습니다.

왜 시그널 폼을 사용해야 할까요?

웹 애플리케이션에서 폼을 구성한다는 것은 필드 값을 추적하고 사용자가 입력한 값의 유효성을 검사하고, 오류 상태를 처리하며, 데이터 모델과 화면을 동기화해야 하는 것을 의미합니다. 이런 문제를 개별적으로 해결하려면 기본 코드가 늘어나고 복잡성이 증가합니다.

이런 문제를 시그널 폼은 이렇게 해결합니다:

• 상태를 자동으로 동기화합니다 - 폼 데이터 모델과 폼 필드를 자동으로 동기화합니다.
• 타입 검사를 보장합니다 - 화면과 데이터 모델의 타입을 명확하게 정의합니다.
• 유효성 검사를 한 곳에서 처리합니다 - 유효성 검사 규칙은 모두 유효성 검사 스키마 하나로 정의합니다.

시그널 폼은 시그널 기반으로 동작하는 애플리케이션과 가장 잘 맞습니다. 기존 애플리케이션에서 반응형 폼을 사용하고 있다면 반응형 폼도 여전히 좋은 선택입니다.

조건

시그널 폼을 사용하려면 Angular 버전이 v21을 포함하여 이후 버전이어야 합니다.

환경설정

시그널 폼은 @angular/forms 패키지로 제공됩니다. 그래서 시그널 폼 구성에 필요한 함수나 디렉티브는 @angular/forms/signals에서 불러오면 됩니다.

import {form, FormField, required, email} from '@angular/forms/signals';

그중에서 폼 필드 인스턴스와 HTML 입력 필드를 연결하는 FormField 디렉티브는 꼭 불러와야 합니다:

@Component({
  // ...
  imports: [FormField],
})

다음 단계

시그널 폼에 대해 더 알아봅시다: