Angular> 유효성 검사

Angular는 기본으로 제공하는 유효성 검사가 있다.

https://angular.io/api/forms/Validators 

Angular

 

 

유효성 검사 추가 특징

Define custom validators

Cross field validation

Asynchronous validators

 

https://angular.io/guide/form-validation 

Angular

 

 

요구사항

 

빈자리가 있으면 안되고

이메일 규칙을 따라야 하고

신용카드 번호는 숫자만 16개

CVC는 숫자만 3개

 

개발 순서

1. form controls에 관한 유효성 검사 규칙을 구체화한다.

2. form control에 접근하는 Getter method를 구체화한다

3. 에러메시지를 보여주는 HTML 작성

4. 제출 버튼을 누를 때 유효성 상태를 검사하는 이벤트 핸들러를 추가한다.

 

---

1. 

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

으로 import를 한다.

 

FormControl object에 의해 표현되는 form field.

FormControl을 생성하고 초기값과 validators를 입력.

 

Validator.email과 Validators.pattern이 있는데

Validator.email은 도메인 이름 형식을 체크하지 않기 때문에

regular expression이 있는 Validators.pattern을 사용한다.

 

 

패턴의 의미는 

숫자와 문자 어떤 조합이든 가능하게 한다. / @ 기호 /숫자와 문자 어떤 조합이든 가능하게 한다. / 도메인 확장 2~4 글자

자세한 내용은

www.regextutorials.com  

Regex crash course and excercises

 

 

 

2.

component ts 파일에서 formGroup의 control에 있는 변수값을 가져오는 getter method를 만든다.

 

 

3. 

필드값이 유효하지 않은지? 유저가 필드값을 바꿨는지? 필드값 포커스가 안 놓여있는지?

errors 오브젝트는 form control에 관해서 실패한 유효성 리스트를 갖고 있다.

 

4.

모든 필드 터칭은 에러메시지 표시를 하게 만든다. 

제출 버튼을 누르면 필드의 유효성 검사를 실시하고 오류가 있으면 에러 메시지를 표시하도록 명령한다.

에러 메시지를 표시하라고 하면 에러 메시지를 표시한다. 

 

Last name과 Email도 복붙해서 만들자.

 

 

---

Custom Validator Rule

 

공백만 채우면 걸리는 유효성 검사

1. 유효성 검사 규칙 정의

2. form control에 유효성 검사 

3. HTML 수정

 

작동 원리

유효성 규칙을 클래스로 만들어서 control form에다가 등록한다.

control form에 유저가 잘못된 것을 입력할 경우 등록된 클래스가 작동하여 반환값으로 validation error key를 true로 바꾼다.

페이지에서 error모음을 확인하여 validation error key를 참조하고 true면 에러메시지를 표시한다. 

 

 

1.

 

클래스를 만든다.

ng generate class validators/SeolValidators

 

 

Validation error key

HTML 템플릿이 에러키를 확인해서 에러가 났는지 판단한다.

 

 

2.

 

 

 

3.

|| 연산자를 사용해서 추가하면 된다.

 

---

 

Shipping address도 반복 과정이다. 

 

 

 

 

 

 

Billing Address도 반복이다.

Shipping address와 필드값이 똑같아서 그대로 복붙.

 

getter 메서드도 마찬가지

 

 

이런식으로 나머지 부분도 적절히 채우자

 

한 가지 주의해야 할 점은 minlength를 주의해야한다.

component.ts에서 formGroup의 control에 Validators.minLength(2) 이렇게 적혀있지만 

errors?.['minlength'] 여기에서는 대문자를 넣으면 안된다. 

 

---

신용카드 정보 입력

 

위 내용 반복

ts에서 form group control에서 유효성 규칙을 넣는다.

control 필드를 가져오는 getter 메서드를 만든다. 

HTML 페이지에서 필드값을 참조하여 에러값이 있을 경우 출력하는 조건문을 만든다.