Angular 2
Angular2 사용자 정의 유효성 검사

매개 변수

사용자 정의 유효성 검사기 예제 :

Angular 2에는 두 종류의 사용자 정의 유효성 검사기가 있습니다. 클라이언트에서 직접 실행되는 첫 번째 예제와 같은 동기 유효성 검사기 및 유효성 검사를 수행하기 위해 원격 서비스를 호출하는 데 사용할 수있는 비동기 유효성 검사기 (두 번째 예제). 이 예제에서 유효성 검사기는 서버를 호출하여 값이 고유한지 확인해야합니다.

export class CustomValidators {

static cannotContainSpace(control: Control) {
    if (control.value.indexOf(' ') >= 0)
        return { cannotContainSpace: true };

    return null;
}

static shouldBeUnique(control: Control) {
    return new Promise((resolve, reject) => {
        // Fake a remote validator.
        setTimeout(function () {
            if (control.value == "exisitingUser")
                resolve({ shouldBeUnique: true });
            else
                resolve(null);
        }, 1000);
    });
}}

컨트롤 값이 유효하면 호출자에게 null을 반환하기 만하면됩니다. 그렇지 않으면 오류를 설명하는 객체를 반환 할 수 있습니다.

Formbuilder에서 유효성 검사기 사용하기

   constructor(fb: FormBuilder) {
    this.form = fb.group({
        firstInput: ['', Validators.compose([Validators.required, CustomValidators.cannotContainSpace]), CustomValidators.shouldBeUnique],
        secondInput: ['', Validators.required]
    });
}

여기서는 FormBuilder를 사용하여 두 개의 입력 상자가있는 매우 기본적인 폼을 만듭니다. FromBuilder는 각 입력 컨트롤에 대해 세 개의 인수에 대한 배열을 사용합니다.

1. 컨트롤의 기본값입니다.
2. 클라이언트에서 실행할 유효성 검사기입니다. Validators.compose ([arrayOfValidators])를 사용하여 컨트롤에 여러 유효성 검사기를 적용 할 수 있습니다.
3. 두 번째 인수와 비슷한 방식으로 하나 이상의 비동기 유효성 검사기입니다.

get / set formBuilder 컨트롤 매개 변수

formBuilder 컨트롤 매개 변수를 설정하는 두 가지 방법이 있습니다.

1. 초기화시 :

exampleForm : FormGroup;
constructor(fb: FormBuilder){
  this.exampleForm = fb.group({
      name : new FormControl({value: 'default name'}, Validators.compose([Validators.required, Validators.maxLength(15)]))
   });
}

2.After 초기화 :

this.exampleForm.controls['name'].setValue('default name');

formBuilder 컨트롤 값 가져 오기 :

let name = this.exampleForm.controls['name'].value();