폼 템플릿 사용

Angular에서 폼을 만들기 위해 먼저 ReactiveFormsModule를 import 해야 합니다. 그런 다음, HTML 템플릿에서 폼을 생성하고 유효성 검사를 수행할 수 있습니다.

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

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

폼을 생성하기 위해 HTML 템플릿에서 form 요소를 사용합니다. 이 form 요소 내에 input, select, textarea 등의 폼 요소를 추가하여 폼을 만들 수 있습니다. 이때 formGroup 디렉티브를 사용하여 폼과 연결합니다.

<!-- form 템플릿 -->
<form [formGroup]="myForm">
  <input formControlName="name">
  <button>Save</button>
</form>

formControlName 디렉티브를 사용하여 각 입력 요소를 폼 컨트롤에 연결합니다.

폼 전환

폼 전환은 사용자가 입력을 변경할 때 실시간으로 유효성을 검사하고 상태를 전환하는 기능을 제공합니다. Angular에서 폼 전환을 구현하려면 다음 단계를 수행합니다.

1. Angular 폼 모듈에서 FormControl을 import 합니다.

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

1. 각 입력 필드에 대해 FormControl을 생성하고 유효성 검사를 추가합니다.

myForm = new FormGroup({
  name: new FormControl('', Validators.required)
});

1. 템플릿에서 유효성 검사를 기반으로 UI를 변경합니다.

<form [formGroup]="myForm">
  <input formControlName="name" [class.error]="myForm.get('name')?.invalid && myForm.get('name')?.touched">
  <div *ngIf="myForm.get('name')?.invalid && myForm.get('name')?.touched">Name is required</div>
  <button>Save</button>
</form>

위 예제에서는 input 요소에 error 클래스를 추가하여 유효성 검사에 실패한 경우 시각적으로 표시할 수 있습니다. 또한, 오류 메시지를 표시하기 위해 *ngIf 디렉티브를 사용했습니다.

이제 Angular에서 폼 템플릿을 사용하여 폼을 생성하고 유효성을 확인하며, 폼 전환을 구현하는 방법을 알아보았습니다. 사용자가 입력을 변경할 때 실시간으로 유효성을 확인하여 더 나은 사용자 경험을 제공할 수 있습니다.