Mobile mobileNumberValidator returns fine but the other two validators returns a null promise on errors. Cant identify the mistake i have done here. Please help. Those two validators sets errors in formbuilder object as follows
errors : {__zone_symbol__state: null, __zone_symbol__value: Array(0)}
In form builder group
this.empInfoForm = this.fb.group({
'Mobile': [null, [Validators.required], [this.mobileNumberValidator.bind(this)]],
'Private': [null, [this.privateNumberValidator.bind(this)]],
'Work': [null, [this.workNumberValidator.bind(this)]],
});
Validator Methods
mobileNumberValidator(control: AbstractControl) {
return new Promise(resolve => {
setTimeout(() => {
if (!this.isMobileNumberValid) {
resolve({
'phoneNumber': true
})
console.log(this.empInfoForm)
} else {
resolve(null);
}
}, 10);
})
}
workNumberValidator(control: AbstractControl) {
return new Promise(resolve => {
setTimeout(() => {
if (!this.isWorkNumberValid) {
resolve({
'phoneNumber': true
})
console.log(this.empInfoForm)
} else {
resolve(null);
}
}, 10);
})
}
privateNumberValidator(control: AbstractControl) {
return new Promise(resolve => {
setTimeout(() => {
if (!this.isPrivateNumberValid) {
resolve({
'phoneNumber': true
})
console.log(this.empInfoForm)
} else {
resolve(null);
}
}, 10);
})
}
I found the mistake I have done here. Custom validator binding should be the third parameter here.
this.empInfoForm = this.fb.group({
'Mobile': [null, [Validators.required], [this.mobileNumberValidator.bind(this)]],
'Private': [null,null,[this.privateNumberValidator.bind(this)]],
'Work': [null,null,[this.workNumberValidator.bind(this)]],
});