使用来自 ngrx 存储选择器的可观察量的自定义异步验证器不会返回 'null'，除非我输入 take(1) 运算符

Question

表单组

colleges$ = this.store.select(getColleges);
this.personalFg = this.fb.group({
college: ['',[Validators.required],[this.customValidatorWithinSelection(this.colleges$)]],
course: ['',[Validators.required]],
});

自定义异步验证器

customValidatorWithinSelection(options:Observable<any>): AsyncValidatorFn{
return (control: AbstractControl): Observable<ValidationErrors | null> =>{
return options.pipe(
map(options=>{
let selected = options.filter(college=>college.description === control.value);
//console.log('validator',selected, control.value, selected.length > 0 ? null : {validate: 'error'})
return selected.length > 0 ? null: {validate: 'error'};
}),
take(1),
)
}
}

到目前为止，我的代码工作得很好，我有我需要的，但我想理解为什么customValidatorWithinSelection总是返回false，如果我删除take(1)操作符。

Answer 1

async验证器观察对象完成是很重要的，如果你删除take(1)，它可能会导致表单字段中的意外行为，例如控件被卡在pending状态。

你可以通过访问formControl

中的pending props来检查validator是否完成

this.personalFg.get('college').pending // will return true if we remove take(1)