[angular] Angular 폼 데이터 불러오기

26 Dec 2023

angular

Angular 애플리케이션에서 폼 데이터를 효과적으로 불러오는 방법에 대해 다루겠습니다.

Reactive Forms를 사용하여 폼 데이터 불러오기

Angular에서 Reactive Forms를 사용하면 효율적으로 폼 데이터를 불러올 수 있습니다. Reactive Forms는 RxJS를 기반으로 하며, 컴포넌트 클래스와 템플릿을 함께 사용하여 폼을 관리할 수 있습니다.

Reactive Forms를 사용하면 FormControl과 FormGroup를 사용하여 폼 데이터를 추적하고 업데이트할 수 있습니다.

예제 코드:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } 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;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      firstName: '',
      lastName: '',
      email: ''
    });
  }
}

위 코드에서는 FormBuilder를 사용하여 FormGroup를 초기화하고, 초기값을 설정합니다.

HTTP 서비스를 사용하여 데이터 불러오기

폼 데이터를 서버로부터 불러올 때는 HTTP 서비스를 사용합니다. Angular에서는 HttpClient 모듈을 활용하여 HTTP 요청을 수행하고 응답을 처리할 수 있습니다.

예제 코드:

import { HttpClient } from '@angular/common/http';

// ...

export class MyFormComponent implements OnInit {
  // ...

  constructor(private formBuilder: FormBuilder, private http: HttpClient) { }

  ngOnInit() {
    // ...

    this.http.get('https://api.example.com/data')
      .subscribe((data: any) => {
        this.myForm.patchValue(data);
      });
  }
}

위 코드에서 HttpClient를 사용하여 서버에서 데이터를 가져온 후 patchValue 메소드를 사용하여 폼에 데이터를 설정합니다.

Angular에서 폼 데이터를 불러오는 과정은 Reactive Forms와 HTTP 서비스를 효율적으로 활용하는 것이 중요합니다.

이상으로 Angular 애플리케이션에서 폼 데이터를 불러오는 방법에 대해 알아보았습니다.

참고문헌: