폼 컨트롤 생성

먼저, Angular 애플리케이션에 폼을 만들고 폼 컨트롤을 생성해야 합니다. 폼 컨트롤은 FormControl 클래스를 사용하여 생성됩니다.

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form>
      <input type="text" [formControl]="nameControl">
    </form>
  `
})
export class FormComponent {
  nameControl = new FormControl('');
}

위 코드에서는 FormControl 클래스를 사용하여 nameControl을 생성했습니다.

유효성 검사 추가

폼 입력의 유효성을 검사하려면 Validators 모듈을 사용하여 유효성 검사기를 만들어야 합니다. 예를 들어, 필수 입력 필드를 검사하려면 Validators.required를 사용합니다.

import { Validators } from '@angular/forms';

nameControl = new FormControl('', Validators.required);

위 코드는 nameControl에 필수 입력 필드 유효성 검사를 추가했습니다.

에러 메시지 표시

유효성 검사에 실패하면 사용자에게 에러 메시지를 표시해야 합니다. 이를 위해 HTML 템플릿에서 formControlName 디렉티브를 사용하여 에러 메시지를 표시할 수 있습니다.

<form [formGroup]="nameForm">
  <input type="text" formControlName="name">
  <div *ngIf="nameControl.hasError('required')">
    이름을 입력해주세요.
  </div>
</form>

위 코드에서는 nameControl의 필수 입력 필드 유효성 검사에 실패하면 에러 메시지가 표시됩니다.

이제 Angular에서 폼 컨트롤을 생성하고 상세하게 설정하는 방법에 대해 알아보았습니다. 이를 통해 사용자 입력 값을 검사하고 처리할 수 있습니다.