[angular] Angular 폼 데이터 저장

26 Dec 2023

angular

Angular는 사용자 입력을 받아 다양한 방식으로 처리할 수 있는 강력한 기능을 제공합니다. 폼을 통해 사용자 입력을 받은 데이터를 저장하고 활용하는 방법에 대해 알아봅시다.

1. Angular 폼 설정

우선, Angular 폼을 설정해야 합니다. 먼저 ReactiveFormsModule을 import 하고, 입력 필드를 만들기 위해 formControl을 사용합니다.

import { Component, NgModule } from '@angular/core';
import { ReactiveFormsModule, FormControl, FormsModule} from '@angular/forms';

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

2. 사용자 입력 받기

다음으로, 사용자로부터 입력을 받아야 합니다. Angular에서는 ngForm 디렉티브를 사용하여 폼을 생성하고, formControl을 사용하여 데이터를 받습니다.

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="name">
      <button (click)="saveData()">Save</button>
    </form>
  `
})
export class FormComponent {
  form = new FormGroup({
    name: new FormControl('')
  });

  saveData() {
    const formData = this.form.value;
    // 저장 로직 추가
  }
}

3. 데이터 저장

마지막으로, 입력받은 데이터를 저장합니다. saveData 메서드 내에서 입력값을 가져와 서버에 저장하거나 로컬 스토리지에 저장하는 등의 작업을 수행할 수 있습니다.

saveData() {
  const formData = this.form.value;
  // 서버에 데이터 전송
  this.http.post('/api/data', formData).subscribe(response => {
    console.log('데이터가 저장되었습니다.');
  });
}

Angular를 사용하여 폼 데이터를 저장하는 방법에 대해 간단히 알아보았습니다. 사용자 입력을 받고 저장하는 과정을 통해 Angular의 폼 기능을 활용할 수 있습니다.

더 많은 내용을 학습하려면 Angular 공식 문서를 참고하세요.