반응형 폼 유효성 검사

반응형 폼 유효성 검사

반응형 폼에서는 유효성 검사 결과가 컴포넌트 클래스에서 전달됩니다. 그래서 유효성 검사 어트리뷰트는 템플릿에서 적용하지 않고 컴포넌트 클래스에서 폼 컨트롤 모델을 정의할 때 유효성 검사기로 적용합니다. 이 함수는 해당 폼 컨트롤의 값이 변경될 때마다 실행됩니다.

/** 히어로의 이름은 인자로 받은 정규표현식에 매칭되지 않아야 합니다.  */
export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    const forbidden = nameRe.test(control.value);
    return forbidden ? {'forbiddenName': {value: control.value}} : null;
  };

이 함수의 실제 역할은 팩토리 함수일 뿐이며, 금지할 이름에 해당하는 정규 표현식을 인자로 받고 유효성 검사기를 함수 형태로 반환합니다.

컴포넌트에 정의한 대로라면 “bob”이라는 이름이 금지되며, “bob”이 아닌 값은 모두 유효합니다. 다른 이름을 금지하려면 인자로 전달하는 정규 표현식을 수정하면 됩니다.

forbiddenNameValidator 팩토리는 유효성 검사기를 반환합니다. 이 함수는 Angular 폼 컨트롤 객체를 인자로 받으며, 유효성 검사에 실패하면 에러 오브젝트를 반환하고 유효성 검사를 통과하면 null을 반환합니다. 에러 오브젝트의 프로퍼티는 보통 유효성 검사기의 이름을 지정하기 때문에 'forbiddenName'으로 선언했으며, 이 프로퍼티의 값은 폼 컨트롤의 현재 값을 할당했습니다. 이 에러 객체를 활용하면 어떤 값이 입력되어서 잘못되었는지 템플릿에 표시할 수 있습니다.

커스텀 비동기 유효성 검사기는 반환 타입이 Promise나 Observable인 것만 빼면 동기 유효성 검사기와 비슷하며, 이 객체 안에 에러 객체나 null을 반환합니다. 만약 반환 타입이 옵저버블이라면 유효성 검사 로직이 종료된 이후에 이 옵저버블은 반드시 종료되어야 합니다.