Angular validationForm 2 예시

회원가입 사용자 정보 수집하기

 

---

 

회원가입 폼에서 다룰 사용자 정보

• 이메일 (email)
• 닉네임 (nickname)
• 비밀번호 (password)
• 비밀번호 확인 (confirmPassword)

즉, 우리가 만들 FormGroup 구조는 다음과 같습니다.

{
  email: string;
  nickname: string;
  password: string;
  confirmPassword: string;
}

 

---

 

validationForm 생성하기

먼저 컴포넌트에서 validationForm을 선언하고 생성합니다.

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

@Component({
  selector: 'app-sign-up',
  templateUrl: './sign-up.component.html',
})
export class SignUpComponent {
  public validationForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.validationForm = this.fb.group({
      email: ['', [Validators.required, Validators.email]],
      nickname: ['', [Validators.required, Validators.minLength(2)]],
      password: ['', [Validators.required, Validators.minLength(8)]],
      confirmPassword: ['', Validators.required],
    });
  }
}

 

• 회원가입에 필요한 모든 input을 FormGroup 하나로 관리한다
• 각 필드는 하나의 FormControl이다

 

---

템플릿에서 input 연결하기

이제 HTML에서 input을 validationForm과 연결합니다.

<form [formGroup]="validationForm" (ngSubmit)="onSubmit()">
  <input type="email" placeholder="이메일" formControlName="email" />

  <input type="text" placeholder="닉네임" formControlName="nickname" />

  <input type="password" placeholder="비밀번호" formControlName="password" />

  <input type="password" placeholder="비밀번호 확인" formControlName="confirmPassword" />

  <button type="submit" [disabled]="validationForm.invalid">
    회원가입
  </button>
</form>

 

• input 값 변경 → FormControl 값 업데이트
• validation 상태 변경 → validationForm.valid 반영

 

---

 

사용자가 입력한 값은 어디에 ?

 

회원가입 버튼을 누르기 전에도,
사용자 입력값은 이미 validationForm 안에 저장되어 있습니다.

this.validationForm.value

 

 

값 형태는 다음과 같습니다.

{
  email: 'test@example.com',
  nickname: '테스트',
  password: 'password1234',
  confirmPassword: 'password1234'
}

• 즉, input을 따로 state로 관리할 필요가 없습니다.

 

---

submit 시 사용자 정보 꺼내기

이제 submit 시점에서 사용자 정보를 꺼내봅니다.

onSubmit() {
  if (this.validationForm.invalid) {
    return;
  }

  const { email, nickname, password } = this.validationForm.value;

  const signUpPayload = {
    email,
    nickname,
    password,
  };

  console.log('회원가입 요청 데이터', signUpPayload);
}

 

• confirmPassword는 서버로 보낼 필요가 없음
• validationForm.value에서 필요한 값만 골라서 사용

 

---

 

커스텀 Validator로 입력값 규칙 추가하기

회원가입 폼에서는 단순 required, minLength만으로는 부족한 경우가 많습니다.
예를 들어 닉네임은 영문 대/소문자 + 숫자만 허용 같은 정책이 있을 수 있습니다.

이럴 때 Angular에서는 커스텀 Validator를 만들어서 FormControl에 직접 연결합니다.

커스텀 Validator 함수 만들기

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

private alphaNumericValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    const value = control.value;

    // 값이 없으면 다른 validator(required 등)에게 맡김
    if (!value) return null;

    // 영문 대/소문자 + 숫자만 허용
    const regex = /^[A-Za-z0-9]+$/;

    return regex.test(value) ? null : { alphaNumeric: true };
  };
}

• Validator는 항상 ValidatorFn을 반환
• 유효하면 null
• 유효하지 않으면 { 에러이름: true } 형태 반환

---

FormGroup에 커스텀 Validator 적용하기

이제 이 Validator를 nickname FormControl에 연결합니다.

this.validationForm = this.fb.group({
  email: ['', [Validators.required, Validators.email]],
  nickname: [
    '',
    [
      Validators.required,
      Validators.minLength(2),
      this.alphaNumericValidator(),
    ],
  ],
  password: ['', [Validators.required, Validators.minLength(8)]],
  confirmPassword: ['', Validators.required],
});

이 시점부터 nickname은 영문 + 숫자만 입력 가능합니다.

---

템플릿에서 커스텀 에러 처리하기

Validator에서 반환한 에러 키(alphaNumeric)는 그대로 템플릿에서 사용합니다.

@if (
  validationForm.get('nickname')?.touched &&
  validationForm.get('nickname')?.errors?.['alphaNumeric']
) {
  <p>닉네임은 영문과 숫자만 사용할 수 있습니다.</p>
}

 

• 입력 중에는 메시지 없음
• blur 이후(touched) 규칙 위반 시 안내