[angular] Angular 폼 데이터 전송

26 Dec 2023

angular

Angular를 사용하여 폼 데이터를 전송하는 방법에 대해 알아보겠습니다.

폼 생성하기

먼저 폼을 생성해야 합니다. Angular 폼 모듈을 import 하고, 폼의 HTML 템플릿을 작성합니다.

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <input type="text" name="username" ngModel>
  <button type="submit">전송</button>
</form>

데이터 전송하기

폼을 제출할 때 데이터를 전송하는 방법은 두 가지가 있습니다. 첫 번째는 폼 데이터를 직접 처리하는 것이며, 두 번째는 Angular의 HttpClient 모듈을 사용하여 서버에 데이터를 전송하는 것입니다.

1. 폼 데이터를 직접 처리

onSubmit() {
  const formData = new FormData();
  formData.append('username', this.myForm.value.username);

  // formData를 서버에 전송
}

2. HttpClient 모듈 사용

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

constructor(private http: HttpClient) {}

onSubmit() {
  const formData = { username: this.myForm.value.username };

  this.http.post('https://example.com/api/data', formData)
    .subscribe(response => {
      // 성공적으로 전송된 경우의 처리
    });
}

이제 Angular를 사용하여 폼 데이터를 전송하는 방법을 알아보았습니다.

참고문헌: