Menu
In the typescript function below, 'this' doesn't resolve to the instance of EmailValidator. How can I correct this function so it resolves to the correct instance of EmailVaildator and in turn, so that I can access _registerServices?
class EmailValidator {
constructor(private _registerServices: RegisterServices) { }
isAvailable(c: AbstractControl): Promise<ValidationResult> {
let q = new Promise((resolve, reject) => {
this._registerServices.emailIsAvailable(antiForgeryToken(), c.value)
.then(result => {
// Need to actually check the result.
resolve({ "emailtaken": true })
},
error => {
// Need to communicate the server error? Probably not.
resolve({ "servererror": true })
});
});
return q;
}
}
767
To resolve the promise, we called the then() method on the promise object. The function we passed to the then() method gets called with the resolved value as a parameter. We can access this value in the body of the function. Notice that we also used the catch() method.
var a = this; one(). then(function () { console. log(a) }); Update: use an arrow function - they borrow the context ( this ) from their outer scope.
If an error condition arises inside a promise, you “reject” the promise by calling the reject() function with an error. To handle a promise rejection, you pass a callback to the catch() function. This is a simple example, so catching the rejection is trivial.
The Promise.all() method takes an iterable of promises as an input, and returns a single Promise that resolves to an array of the results of the input promises. This returned promise will fulfill when all of the input's promises have fulfilled, or if the input iterable contains no promises.
You are losing this, because you are passing around the isAvailableEmail as a "raw" function here:
email: ['', Validators.required, this._emailValidator.isAvailableEmail]
You can fix this by binding it to this (using the fat arrow):
email: ['', Validators.required,
(control) => { this._emailValidator.isAvailableEmail(control) }
]
It turned out that the 'this' reference was undefined even if it was used as follows:
class EmailValidator {
constructor(private _registerServices: RegisterServices) { }
isAvailable(c: AbstractControl): EmailValidator {
return this; // 'This' is undefined!
}
}
I gather this has something to do with how the method was called, perhaps passing a non-static method where a static method was expected:
...
this.registerForm = fb.group({
email: ['', Validators.required, this._emailValidator.isAvailableEmail],
password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
phoneNumber: ['', Validators.required],
country: ['', Validators.required]
});
...
If someone could offer some guidance on what's occurring here, that'd be fantastic.
I reordered my code and produced the following:
class EmailValidator {
static isAvailableEmail(services: RegisterServices): (AbstractControl) => Promise<ValidationResult> {
let g = (c: AbstractControl) => {
return new Promise((resolve, reject) => {
services.emailIsAvailable(antiForgeryToken(), c.value)
.then(result => {
// Need to actually check the result.
resolve({ "emailtaken": true })
},
error => {
// Need to communicate the server error? Probably not.
resolve({ "servererror": true })
});
});
};
return g;
}
}
And amended its usage:
...
this.registerForm = fb.group({
email: ['', Validators.required,
EmailValidator.isAvailableEmail(this._registerService)],
password: ['', Validators.compose([Validators.required, Validators.minLength(8)])],
phoneNumber: ['', Validators.required],
country: ['', Validators.required]
});
...
Which works correctly.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With