폼 제출 추가하기

마지막으로 폼 제출을 처리하는 방법을 배워봅시다. submit() 함수를 사용해서 폼이 유효할 때 비동기 작업을 실행하고, 폼에 오류가 있을 때 제출 버튼을 비활성화하는 방법을 배웁니다.

이번 실습에서는 다음 내용을 배웁니다:

  • submit() 함수 불러오기
  • 제출 핸들러 메서드 만들기
  • submit()으로 폼이 유효할 때만 로직 실행하기
  • 폼 상태에 따라 제출 버튼 비활성화하기

폼을 완성해 봅시다!

  1. submit 함수 불러오기

    @angular/forms/signals에서 submit 함수를 불러옵니다:

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

  2. onSubmit 메서드 추가하기

    컴포넌트 클래스에 폼 제출을 처리하는 onSubmit() 메서드를 추가합니다:

    onSubmit(event: Event) {
  event.preventDefault();
  submit(this.loginForm, async () => {
    const credentials = this.loginModel();
    console.log('Logging in with:', credentials);
    // Add your login logic here
  });
}

    submit() 함수는 폼이 유효할 때만 비동기 콜백을 실행합니다. 폼의 제출 상태도 자동으로 처리합니다.

  3. 제출 핸들러를 폼에 바인딩하기

    템플릿에서 onSubmit() 메서드를 폼의 submit 이벤트에 바인딩합니다:

    <form (submit)="onSubmit($event)"></form>

  4. 폼이 유효하지 않을 때 버튼 비활성화하기

    폼이 유효하지 않으면 제출 버튼이 비활성화되도록 수정합니다:

    <button type="submit" [disabled]="loginForm().invalid()">Log in</button>

    폼에 유효성 검사 오류가 있으면 제출할 수 없게 합니다.

축하합니다! 시그널 폼으로 로그인 폼을 완성했습니다.

배운 내용을 정리하고 심화 주제를 살펴볼까요? 다음 단계로 이동하세요!