폼 모델 구성하기

모든 시그널 폼은 폼 데이터 모델에서 시작합니다. 폼 데이터 모델은 데이터 구조를 정의하고 폼 데이터를 저장하는 시그널입니다.

이번 단계에서는 다음 내용을 배웁니다:

• 폼 데이터를 위한 TypeScript 인터페이스 정의하기
• 폼 값을 저장할 시그널 생성하기
• form() 함수로 시그널 폼 생성하기

로그인 폼의 기초를 만들어 봅시다!

1. LoginData 인터페이스 정의하기

   로그인 폼 데이터의 구조를 정의하는 TypeScript 인터페이스를 만듭니다. 폼에는 다음 필드가 필요합니다:

   • email 필드(문자열)
   • password 필드(문자열)
   • rememberMe 필드(불리언)

   interface LoginData {
     email: string;
     password: string;
     rememberMe: boolean;
   }

   이 인터페이스를 @Component 데코레이터 위에 추가하세요.

2. signal과 form 불러오기

   @angular/core에서 signal 함수를, @angular/forms/signals에서 form 함수를 불러옵니다:

   import {Component, signal} from '@angular/core';
   import {form} from '@angular/forms/signals';

3. 폼 모델 시그널 생성하기

   컴포넌트 클래스에 초깃값을 지정한 loginModel 시그널을 만듭니다. 타입 인자에는 LoginData 인터페이스를 사용하세요:

   loginModel = signal<LoginData>({
     email: '',
     password: '',
     rememberMe: false,
   });

   텍스트 필드의 초깃값은 빈 문자열이고, 체크박스의 초깃값은 false입니다.

4. 폼 생성하기

   이제 모델 시그널을 form() 함수에 전달해서 폼을 만듭니다:

   loginForm = form(this.loginModel);

   form() 함수는 모델로 폼을 생성하며, 필드 상태와 유효성 검사에 접근할 수 있게 합니다.

폼 모델을 구성했습니다! loginModel 시그널은 폼 데이터를 저장하고, loginForm을 사용하면 타입 안전성을 유지하면서 각 필드에 접근할 수 있습니다.

다음 단계에서는 폼을 템플릿에 연결하는 방법을 배웁니다!