폼을 템플릿에 연결하기

이제 [formField] 디렉티브를 사용해서 폼을 템플릿에 연결합니다. 이렇게 하면 폼 모델과 입력 엘리먼트 사이에 양방향 데이터 바인딩이 만들어집니다.

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

  • FormField 디렉티브 불러오기
  • [formField] 디렉티브로 폼 필드를 입력 엘리먼트에 바인딩하기
  • 텍스트 입력과 체크박스를 폼에 연결하기
  • 템플릿에 폼 필드 값 표시하기

템플릿을 연결해 봅시다!

  1. FormField 디렉티브 불러오기

    @angular/forms/signals에서 FormField 디렉티브를 불러오고 컴포넌트의 imports 배열에 추가합니다:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrl: './app.css',
  imports: [FormField],
})

  2. 이메일 필드 바인딩하기

    템플릿의 이메일 입력 엘리먼트에 [formField] 디렉티브를 추가합니다:

    <input type="email" [formField]="loginForm.email" />

    loginForm.email 표현식은 폼의 이메일 필드에 접근합니다.

  3. 비밀번호 필드 바인딩하기

    비밀번호 입력 엘리먼트에 [formField] 디렉티브를 추가합니다:

    <input type="password" [formField]="loginForm.password" />

  4. 체크박스 필드 바인딩하기

    체크박스 입력 엘리먼트에 [formField] 디렉티브를 추가합니다:

    <input type="checkbox" [formField]="loginForm.rememberMe" />

  5. 폼 값 표시하기

    폼 아래에는 현재 폼 값을 보여주는 디버깅 영역이 있습니다. .value()를 사용해서 각 필드의 값을 표시합니다:

    <p>Email: {{ loginForm.email().value() }}</p>
<p>Password: {{ loginForm.password().value() ? '••••••••' : '(empty)' }}</p>
<p>Remember me: {{ loginForm.rememberMe().value() ? 'Yes' : 'No' }}</p>

    폼 필드 값은 시그널이므로, 입력할 때마다 화면에 표시되는 값이 자동으로 갱신됩니다.

폼을 템플릿에 연결하고 폼 값을 표시했습니다! [formField] 디렉티브는 양방향 데이터 바인딩을 자동으로 처리합니다. 값을 입력하면 loginModel 시그널이 갱신되고, 화면에 표시되는 값도 즉시 갱신됩니다.

다음 단계에서는 폼에 유효성 검사를 추가하는 방법을 배웁니다!