Angular2/4/5에서 사용자 지정 비동기 검증기를 구현하는 방법

Angular2/4/5에서 사용자 지정 비동기 검증기를 구현하는 방법

아직 Angular에서 지원합니까? 이 미해결 문제를 참조하십시오.

그렇다면 아래 코드에서 무엇이 잘못되었습니까?

export class someClass{

    myForm:ControlGroup;

    constructor(public http:Http, public formBuilder:FormBuilder)
       this.myForm = formBuilder.group({
            ImageId: ["", Validators.required, this.asynValidator]
    });

    asyncValidator(control: Control): {[key: string]: any} {

        return new Promise (resolve => {

          let headers = new Headers();
          headers.append('Content-Type', 'application/json');

          this.http.get('http://localhost/ImageIdValidate?id='+ control.value, {headers:headers})
                .map(res => res.json())
                .subscribe(data => {
                    console.log(data);
                    if(data != null) {
                        resolve({"duplicate": true})
                    }
                    else resolve(null);      
                })
            });
        });
      }
    }

그것은 서버 요청도 하지 않습니다.

아래 설명된 대로 구성 요소 인스턴스 자체에서 메서드를 바인딩해야 합니다.

this.myForm = formBuilder.group({
            ImageId: ["",    
               Validators.required, 
               this.asynValidator.bind(this)]
    });

그렇지 않으면 http 속성을 사용하여 요청을 실행할 수 없습니다.

이 문서에서는 비동기 양식 유효성 검사에 대한 힌트도 제공할 수 있습니다("비동기식 유효성 검사" 섹션 참조)

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Angular의 새로운 버전이지만 이전 버전.5.0.0양식 제어의 세 번째 인수로 비동기 검증자를 추가합니다.

myControl: ['', [Validators.required], [this.asyncValidator.bind(this)]]

버전 이후5.0.0이제 검증자를 다음과 같이 표시할 수 있습니다.

myControl: ['', {validators: [Validators.required], 
                 asyncValidators:[this.asyncValidator.bind(this)]}]

안녕하세요 여러분, 해결해 주셔서 감사합니다.하지만 그것은 상자에서 꺼내어 저에게 효과가 없었습니다.

문제는 비동기 유효성 검사기가 유효성 검사기의 일부로 다음 매개 변수여야 한다는 것입니다.그래서 나에게 효과가 있었던 것은

this.myForm = formBuilder.group({
        ImageId: ["",    
           [Validators.required], 
           [this.asynValidator.bind(this)]]
});

그리고 타다!!두통이 사라졌습니다.누군가에게 도움이 되기를 바랍니다.

언급URL : https://stackoverflow.com/questions/35521583/how-to-implement-custom-async-validator-in-angular2-4-5