I am in the process of developing a custom validator for a Slug form control and have encountered an issue with my code.
ngOnInit() {
this.slugCtrl.setAsyncValidators(this.slugValidator);
}
slugValidator(control: AbstractControl) {
const obs1 = control.valueChanges.pipe(
debounceTime(300),
distinctUntilChanged(),
map(val => {
this.isError = of(false);
if (val === ' ') {
this.isAvailable = of(false);
// this.slugCtrl.setErrors({ required: true });
return { required: true };
// obs.next({ required: true });
// obs.complete();
}
this.isAvailable = of(false);
if (this.slugCtrl.valid) {
this.store.dispatch(new SlugActions.checkSlug({ slug: val }));
}
console.log(val);
})
);
return obs1;
}
Upon running the validator, an error message is displayed stating that it cannot read the property 'isError' of undefined. This indicates that the context of "this" is not being passed correctly to the map function. What could be causing this issue?
In addition, I am seeking guidance on how to return multiple observables. My slug validation process involves checking multiple conditions from different sources, each of which returns an observable. Below is the continuation of my code:
this.store.select(getSlugsIsProcessingFail()).subscribe(data => {
this.store.select(getSlugsIsProcessingError()).subscribe(_err => {
if (_err === 'Server error') {
alert(
'There was an error processing your request. Please try again!'
);
this.isError = of(false);
} else if (_err.hasOwnProperty('message')) {
this.error = _err.message;
// this.slugCtrl.setErrors({ available: true });
this.isError = of(true);
return { required: true };
}
});
this.store.select(getSlugsIsProcessingSuccess()).subscribe(data => {
if (data) {
this.isAvailable = of(true);
// this.slugCtrl.setErrors(null);
return null;
}
});
});