Angular Async验证器调试输入

Question

我想为我的Angular form组编写一个自定义async验证器，该jop是要检查该URL是否可以触及。但是，如果我从摘要范围内召回该值，则控件总是以某种方式无效。到目前为止，这是我的代码

export class UrlValidator {
static createValidator(http: HttpClient) {
    return (control: AbstractControl) => {
        const url = control.value;
        return http.get(url).pipe(
            throttleTime(1500),
            catchError(err => {
                console.log('err', err);
                if (err.status && err.status === 200) return of(null);
                return of({ input: 'urlError' });
            })
        );
    };
}
}

debouncetime Call目前不执行任何操作

预先感谢

Answer 1

您可能必须在验证器之外进行汇总。如果输入源不断发射，则验证器将连续调用，在HTTP呼叫之后进行访问不执行任何操作。

export class UrlValidator {
static controlValue=new Subject()
static createValidator(http: HttpClient) {
    UrlValiator.controlValue.next(control.value)
    return (control: AbstractControl) => {
        return controlValue.pipe(
            debounceTime(1500),
            switchMap(()=>http(url))
            catchError(err => {
                console.log('err', err);
                if (err.status && err.status === 200) return of(null);
                return of({ input: 'urlError' });
            })
        );
    };
}
}

Answer 2

好吧，问题是，可观察到的被困在待处理状态。将.first()添加到HTTP可观察到的技巧