[angular] Angular 폼 리셋

26 Dec 2023

angular

Angular 애플리케이션에서 폼을 제어할 때 사용자 입력을 초기 상태로 재설정해야 하는 경우가 있을 수 있습니다. 이를 위해 Angular에서는 폼 리셋 기능을 제공합니다. 이 포스트에서는 Angular에서 폼을 리셋하는 방법에 대해 알아보겠습니다.

폼 리셋이란?

폼 리셋은 사용자가 입력한 내용을 초기화하여 폼을 비우는 작업을 말합니다. Angular에서는 FormGroup과 FormControl을 사용하여 폼을 구성하고 이러한 폼을 리셋할 수 있습니다.

Angular에서 폼 리셋하기

Angular에서는 FormGroup 또는 FormControl 인스턴스의 reset 메서드를 사용하여 폼을 리셋할 수 있습니다. 다음은 FormGroup을 리셋하는 예제 코드입니다.

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit(): void {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', Validators.required]
    });
  }

  resetForm() {
    this.myForm.reset();
  }
}

위 예제 코드에서 resetForm 메서드는 FormGroup을 리셋합니다. 마찬가지로 FormControl에 대해서도 reset 메서드를 사용하여 개별적으로 값을 초기화할 수 있습니다.

// FormControl을 리셋하는 예제
this.myForm.get('name').reset();

정리

이제 Angular에서 폼을 리셋하는 방법에 대해 알아보았습니다. 폼 리셋은 사용자가 입력한 내용을 초기화하여 폼을 비우는 중요한 기능입니다. Angular의 FormGroup과 FormControl을 활용하여 간단히 폼을 리셋할 수 있습니다.

폼 리셋에 대한 더 자세한 내용은 Angular 공식 문서를 참고하세요.