Angular 6：仅当先前的异步验证器未返回错误时，如何调用异步验证器

Question

我有一个带有两个异步验证器的控件： -第一个检查值是否有效 -第二遍检查是否已插入值

因此，如果第一个验证器检查值无效，则第二个验证器将无效。

我将控件定义为：

constructor( private vld1: Validator1, private vld2: Validator2) {}

field: new FormControl('', {
  updateOn: 'blur',
  asyncValidators: [this.vld1.checkValid(), this.vld2.checkIfExists()]
}

两个验证器是（代码仅是示例）：

@Injectable()
export class Validator1 {

    constructor(
        private svc: MyService,
    ) { }


    checkValid(): AsyncValidatorFn {
        return (control: AbstractControl): Promise<{ [key: string]: any } | null> | Observable<{ [key: string]: any } | null> => {
            return this.svc.checkValid(control.value).pipe(
                map(chk => {
                        return null;
                    } else {
                        return { 'notValid': true };
                    }
                })
        }
    }


}


@Injectable()
export class Validator2 {
    constructor(
       private svc: CmpsService
    ) {

    }

    checkIfExists(): AsyncValidatorFn {
        return (control: AbstractControl): Promise<{ [key: string]: any } | null> | Observable<{ [key: string]: any } | null> => {

                return this.svc.getList(control.value).pipe(
                    map(cmps => {
                        return (cmps && cmps.length > 0) ? { 'existingName': { value: controlValue } } : null;
                    })
            }
        };
    }

}

现在，当我离开控件时，两个验证器都会启动，但是我只想在第一个验证器的肯定响应之后启动第二个验证器。

或者，如果可能，将两个验证器合并为一个。 我尝试了以下代码，但没有成功：

@Injectable()
export class Validator1 {

    constructor(
        private svc: MyService,
        private svc2: CmpsService
    ) { }


    checkValid(): AsyncValidatorFn {
        return (control: AbstractControl): Promise<{ [key: string]: any } | null> | Observable<{ [key: string]: any } | null> => {
            return this.svc.checkValid(control.value).pipe(
                map(chk => {
                    return this.svc.getList(control.value).pipe(
                               map(cmps => {
                                      return (cmps && cmps.length > 0) ? { 'existingName': { value: controlValue } } : null;
                               })
                    } else {
                        return { 'notValid': true };
                    }
                })
        }
    }


}