[angular] Angular 리액티브 폼

26 Dec 2023

angular

Angular에서 폼을 다루는 방법은 크게 템플릿 폼과 리액티브 폼 두 가지가 있습니다. 이 글에서는 리액티브 폼에 중점을 두어 알아보도록 하겠습니다.

리액티브 폼이란?

리액티브 폼은 Angular 폼 모듈을 사용하여 폼 컨트롤을 생성하고 관리하는 방법입니다. 이 방법은 폼의 유효성 검증, 값을 추적하고 폼 컨트롤간의 상호작용 등을 쉽게 다룰 수 있도록 도와줍니다.

리액티브 폼의 장점

리액티브 폼의 장점은 다음과 같습니다:

유효성 검증: 리액티브 폼을 사용하면 폼 요소의 유효성을 쉽게 검사할 수 있습니다.
테스트 용이성: 리액티브 폼을 사용하면 유닛 테스트 작성이 용이해집니다.
값 추적: 리액티브 폼은 폼의 값을 추적하고 이를 쉽게 관리할 수 있도록 합니다.

리액티브 폼 사용 방법

리액티브 폼을 사용하려면 먼저 ReactiveFormsModule를 NgModule에 import해야 합니다. 아래는 간단한 폼을 만들고 사용하는 예제입니다.

먼저 app.module.ts에서 ReactiveFormsModule를 import 합니다:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule
  ]
})
export class AppModule { }

다음으로 컴포넌트에서 리액티브 폼을 사용합니다. 아래는 간단한 폼을 만들고 유효성을 검증하는 예제 코드입니다:

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html',
  styleUrls: ['./my-form.component.css']
})
export class MyFormComponent implements OnInit {
  myForm: FormGroup;

  ngOnInit() {
    this.myForm = new FormGroup({
      email: new FormControl('', [Validators.required, Validators.email]),
      password: new FormControl('', Validators.required)
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // 유효성 통과 시 수행할 작업
    } else {
      // 유효성 실패 시 에러 처리
    }
  }
}

위 코드에서는 FormGroup, FormControl 및 Validators를 사용하여 폼을 만들고, onSubmit 메서드를 통해 유효성 검증을 처리합니다.

리액티브 폼은 Angular에서 복잡한 폼을 다루는 데 매우 유용한 기능입니다. 리액티브 폼을 사용하면 복잡한 유효성 검증 규칙을 쉽게 다룰 수 있고, 테스트도 쉽게 작성할 수 있습니다.

결론

리액티브 폼은 Angular 애플리케이션에서 유연하고 강력한 폼 처리 기능을 제공합니다. 유효성 검증, 값 추적, 테스트 용이성 등 다양한 장점을 가지고 있으며, 복잡한 폼을 다룰 때 매우 유용하게 사용할 수 있습니다.

참고 문헌:

https://angular.io/guide/reactive-forms