맞춤형 검증

컨트롤 값의 수정을 수행하는 메서드를 노출하는 클래스를 생성하여 사용자 지정 유효성 검사를 수행할 수 있습니다.

typescript로 작업하는 경우 유효성 검사 메서드는 정적 메서드라는 점에 유의할 가치가 있습니다. 즉, 클래스를 인스턴스화하지 않고 메서드를 호출할 수 있습니다.

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

export class CustomValidators {
  static isValidPrice(control: AbstractControl) {
    const value = control.value;
    if (value > 1000) {
      return { invalid_price: true };
    }
    return null;
  }
}

AbstractControl은 컨트롤(검증하려는 것)에 대한 액세스를 제공하는 데 사용됩니다.

사용자 지정 유효성 검사를 사용할 수 있는 한 가지 방법은 양식 그룹을 만드는 동안 유효성 검사기의 요소로 추가하는 것입니다.

  private buildForm() {
    this.form = this.fb.group({
      id: ['', [Validators.required]],
      title: ['', [Validators.required]],
      price: ['', [Validators.required, 
        CustomValidators.isValidPrice]],
      image: '',
      description: ['', [Validators.required]],
    });
  }

그런 다음 뷰에 오류 메시지를 추가할 수 있습니다.

<p *ngIf="form.get('price').hasError('invalid_price')">
    Required Price
</p>
<p *ngIf="form.get('price').hasError('required')">
    Invalid Price
</p>