정규식과 FormBuilder로 Form 검증하기

예약자 정보 입력 페이지에서 성(lastName) / 이름(firstName)을 검증해야 할 일이 있었다.

요구사항

• 성/이름 필드 중 어느 하나라도 값이 비어 있으면 안 된다.

• 성 또는 이름은 한글과 영어과 혼용되면 안된다. → 한글 입력이 된 후에는 영어 입력 불가 및 특수문자 입력 불가, 영어 입력 후에는 한글 입력 불가 및 특수문자 입력 불가

• 한글의 경우 완성된 형태여야 한다.

폼 구성하기

Angular에서 Form을 구성할 때 FormBuilder 을 이용하는 방법이 있다.

constructor(prviate fb:FormBuilder){}

newForm = this.fb.group({
  name: ['', Validators.required],
  email: ['', [Validators.required, Validators.email]]
})

다른 방법으로는 FormGroup 을 이용하는 것도 있다.

newForm = new FormGroup({
  name: new FormControl('', Validators.required),
  email: new FormControl('', [Validators.required, Validators.email])
})

구현하기

1. 필드값 비어있는지 유무 확인하기

FormGroup 내부에는 errors 프로퍼티가 존재한다.

isRequired(){
    this.form.get('firstName').errors?.required
}

<div *ngIf=isRequired()>
{/* 에러 메시지 표시 */}
</div>

errors 안에 있는 required 속성을 사용하면 필드에 있는 값이 비어있으면 에러 메시지를 표시하도록 처리할 수 있다.

2. 언어 감지 및 특수문자 입력 여부 확인하기

사람의 성이나 이름은 한글 혹은 영어로만 구성되어야 한다. ‘김테스T’ ,’정T김’처럼 한글과 영어가 섞여 있는 형태의 성 또는 이름은 올바르지 않은 형식이다.

앞서 요구사항대로 영어 입력 후 새로운 입력이 한글일 때 해당 새로운 입력을 차단해야 하고, 반대로 한글 입력 후 새로운 입력이 영어일 때 해당 새로운 입력을 막아야 한다.

예를 들어,

• ‘정’ 입력이 됐을 때 새로운 입력으로 T 입력 시도 시 해당 새로운 입력 차단

• ‘T’ 입력이 됐을 때 새로운 입력으로 ‘테’ 입력 시도 시 해당 새로운 입력 차단

이 부분은 해당 정규식으로 검증한다.

private filterInput(value: string): string {
    // 새로운 입력 언어를 감지에서 기존 입력 언어와 새로운 입력 언어가 서로 다르면 입력을 막기    
    // 정규식과 replace를 이용
}

또 한 가지로 특수문자가 들어가는 경우에 대해서도 다음과 같은 정규식으로 검증을 해야한다.

/[^a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]/

/[^a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]/.test('정//') -> true
/[^a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣]/.test('정') -> false

3. 한글이 완성된 자음인지 확인하기

실컷 특수문자 및 숫자 패턴을 거르다 보니 또 다른 문제가 생겼다.

예약자 정보 입력 시에 ‘정ㅎ’ 나 정하ㅅ’ 처럼 완성되지 않은 한글에서도 유효성 검증이 필요했다.

여기서도 두 가지 경우에 대해서도 처리가 필요했다.

값이 비어있을 때

input에 값이 존재하지 않을 때도 에러메시지가 뜨는 버그가 생겼는데,

이를 방지하기 위해 inputLanguage를 초기화하고 setValue로 빈 값을 보내서 아예 폼을 초기화 하는 방식을 사용했다.

// inputLanguage 초기화
// 값이 비어있는지 확인
// FormControl 내 값을 setValue로 빈 값 보내기

값이 비어있지 않을 때

예약자 정보 페이지 로딩 시 로그인 유저 정보에서 넘어오는 lastName과 firstName이 세팅되는 로직이 존재하고 있는데, 다음과 같은 정규식을 사용해서 미완성 한글일 경우 에러가 나오게끔 처리했다.

inputLanguage: 'korean'|'english'

private inCompleteHangeul(...) {
  return /[ㄱ-ㅎㅏ-ㅣ]/.test(value);
}

마무리

정규식 공부를 잘 안 했었는데, 유효성 검증 시 이를 활용하려다 보니 조금 시간이 많이 걸렸던 것 같다.

사실 클로드나 GPT한테 물어보면 금방 답변해주기는 하지만… 그래도 기본적인건 머리에 좀 넣고 있어야 하지 않을까라는 생각이 든다.