Async Validator가 Template driven Forms with Angular로 작동하지 않습니다.

Question

템플릿 구동 양식에 대해 비동기 검증기를 만들었습니다.

import {Directive, forwardRef} from "@angular/core"; 
import {NG_ASYNC_VALIDATORS, Validator, AbstractControl, AsyncValidator} from "@angular/forms"; 
import {Observable} from "rxjs"; 


@Directive({ 
    selector: '[asyncValidator][ngModel]', 
    providers: [{ 
    provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => AsyncAgeValidator), multi: true 

    }] 
}) 

export class AsyncAgeValidator implements Validator{ 

    validate(c: AbstractControl): Observable<{[key : number] : any}>{ 
     return this.validateAgeObservable(c.value); 
    } 

    validateAgeObservable(age: number) { 
    return new Observable(observer => { 

     if(age === 20) { 
     observer.next(null); 
     } else { 
     observer.next({asyncInvalid: true}); 
     console.log('validate'); 
     } 
    }); 
    } 

    } 


} 

다음과 같이 내 템플릿에서 사용하고 있지만 템플릿의 유효성 검사기에서 예상 한 오류 메시지가 표시되지 않습니다. 호출이 유효성 검사기로 가고 있지만 구성 요소에 관찰 가능 항목을 등록하지 않은 것 같습니다.

<md-input-container> 
    <input mdInput type="number" name="age" [(ngModel)]="user.age" placeholder="Age" required asyncValidator> 
</md-input-container> 

Answer 1

관측 대상이 완료되지 않으므로 Angular는 언제 양식 상태를 변경해야 하는지를 모릅니다. 관찰 할 수있는 것이 완료되어야한다는 것을 기억하십시오.

당신은 여러 가지 방법으로이 작업을 수행 할 수 있습니다

1) 수동으로 관찰자에 complete() 메소드를 호출 :

validateAgeObservable(age: number) { 
    return new Observable(observer => { 
    observer.next(age === 20 ? null : {asyncInvalid: true}); 
    observer.complete(); 
    }); 
} 

Plunker Example

2)를 호출 first() 방법 :

validate(c: AbstractControl): Observable<{[key : number] : any}>{ 
    return this.validateAgeObservable(c.value).first(); 
} 

validateAgeObservable(age: number) { 
    return new Observable(observer => { 
    observer.next(age === 20 ? null : {asyncInvalid: true}); 
    }); 
} 

Plunker Example