Template-driven forms

Template-driven forms는 HTML 템플릿에 기반을 두고, 폼의 상태와 유효성을 추적하며, Angular 디렉티브를 사용하여 폼을 구축합니다. 폼을 템플릿에 직접 구현하고, Angular가 폼 요소들을 자동으로 추적합니다.

<form (ngSubmit)="onSubmit()">
  <input type="text" name="username" ngModel>
  <button type="submit">Submit</button>
</form>

Reactive forms

Reactive forms는 JavaScript로 폼을 생성하며, FormControl, FormGroup, FormBuilder 등의 Angular 클래스를 사용하여 폼을 작성합니다. 이 방식은 보다 프로그래밍적이며, 복잡한 폼 요소를 처리하는 데 유용합니다.

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

export class MyComponent {
  profileForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.profileForm = this.fb.group({
      firstName: ['', Validators.required],
      lastName: [''],
    });
  }
}

폼을 구성하는 것은 Angular 애플리케이션의 기능을 강화하며, 사용자와의 상호작용을 개선하는 데 중요한 단계입니다. 더 자세한 내용은 Angular Forms 공식 문서를 참고하세요.