사용자 지정 컨트롤의 유효성 검사

자체 유효성 검사 컨트롤

Validator interface

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

export class RatingComponent implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    return control.value > 0 ? null : { required: true };
  }
}

NG_VALIDATORS 등록하기

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

providers: [
  { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true },
  { provide: NG_VALIDATORS, useExisting: forwardRef(() => RatingComponent), multi: true }
]

오류 맵 반환하기

validate(control: AbstractControl): ValidationErrors | null {
  const v = control.value;
  if (v == null) return { required: true };
  if (v < this.min) return { min: { required: this.min, actual: v } };
  return null;
}

오류 사용하기

<small *ngIf="form.controls.stars.errors?.['required']">Pick a rating</small>

외부 유효성 검사기와 결합하기

stars: [0, [Validators.required]] // plus the control's own validate()

동적 유효성 검사

private onValidatorChange: () => void = () => {};
registerOnValidatorChange(fn: () => void) { this.onValidatorChange = fn; }

@Input() set min(v: number) { this._min = v; this.onValidatorChange(); }

비동기 유효성 검사

validate(control: AbstractControl): Observable<ValidationErrors | null> {
  return this.api.isUnique(control.value).pipe(
    map(ok => ok ? null : { taken: true })
  );
}

범위를 명확히 유지하기

유효성 검사 테스트하기

it('requires a rating', () => {
  const c = new FormControl(0);
  expect(component.validate(c)).toEqual({ required: true });
});

완전한 사용자 지정 컨트롤

빠른 확인

복습