Unlocking 'this' Within a Promise

Question

Unlocking 'this' Within a Promise

I seem to have an issue with the 'this' reference in the typescript function provided. It is not correctly resolving to the instance of EmailValidator as expected. How can I fix this so that it points to the correct instance of EmailVaildator, allowing me to 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;
    }
}

typescript angular scoping

Answer 1

Answer №1

You may be experiencing an issue with losing functionality due to how you are using isAvailableEmail as a "raw" function in this scenario:

email: ['', Validators.required, this._emailValidator.isAvailableEmail]

To resolve this, you should consider binding it to this by using the fat arrow syntax:

email: ['', Validators.required,
  (control) => { this._emailValidator.isAvailableEmail(control) }
]

Answer 2

You may be experiencing an issue with losing functionality due to how you are using isAvailableEmail as a "raw" function in this scenario:

email: ['', Validators.required, this._emailValidator.isAvailableEmail]

To resolve this, you should consider binding it to this by using the fat arrow syntax:

email: ['', Validators.required,
  (control) => { this._emailValidator.isAvailableEmail(control) }
]

Answer 3

Answer №2

Upon investigation, it was revealed that the 'this' reference turned out to be undefined even when used in the following context:

class EmailValidator {

    constructor(private _registerServices: RegisterServices) { }

    isAvailable(c: AbstractControl): EmailValidator {
        return this; // The 'This' reference is undefined!
    }
}

It seems that the issue might have stemmed from how the method was invoked, potentially involving passing a non-static method when 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 provide guidance on what exactly is happening here, it would be greatly appreciated.

Proposed Solution

To address the problem, I restructured my code and came up with the following solution:

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 => {
                        // Verification of the result is necessary.
                        resolve({ "emailtaken": true })
                    },
                    error => {
                        // Should server errors be communicated? Probably not.
                        resolve({ "servererror": true })
                    });
            });
        };

        return g;
    }
}

I made adjustments to its usage as well:

...
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]
    });
...

This modification now functions correctly.

Answer 4

Upon investigation, it was revealed that the 'this' reference turned out to be undefined even when used in the following context:

class EmailValidator {

    constructor(private _registerServices: RegisterServices) { }

    isAvailable(c: AbstractControl): EmailValidator {
        return this; // The 'This' reference is undefined!
    }
}

It seems that the issue might have stemmed from how the method was invoked, potentially involving passing a non-static method when 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 provide guidance on what exactly is happening here, it would be greatly appreciated.

Proposed Solution

To address the problem, I restructured my code and came up with the following solution:

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 => {
                        // Verification of the result is necessary.
                        resolve({ "emailtaken": true })
                    },
                    error => {
                        // Should server errors be communicated? Probably not.
                        resolve({ "servererror": true })
                    });
            });
        };

        return g;
    }
}

I made adjustments to its usage as well:

...
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]
    });
...

This modification now functions correctly.

Answer 5

Answer №3

The issue you are experiencing arises from passing the value of isAvailable, which is a function, without executing it. Instead, you are simply passing a reference to the function.

To resolve this problem, one approach is highlighted in @Thilo's response

Another solution involves assigning isAvailable to a lambda expression rather than a traditional function. Here's how:

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 => {
                    // It is crucial to verify the result.
                    resolve({ "emailtaken": true })
                },
                error => {
                    // Should you relay the server error? Probably not necessary.
                    resolve({ "servererror": true })
                });
        });

        return q;
    }
}

Answer 6

The issue you are experiencing arises from passing the value of isAvailable, which is a function, without executing it. Instead, you are simply passing a reference to the function.

To resolve this problem, one approach is highlighted in @Thilo's response

Another solution involves assigning isAvailable to a lambda expression rather than a traditional function. Here's how:

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 => {
                    // It is crucial to verify the result.
                    resolve({ "emailtaken": true })
                },
                error => {
                    // Should you relay the server error? Probably not necessary.
                    resolve({ "servererror": true })
                });
        });

        return q;
    }
}

Answer 7

Answer №4

I propose writing it in a slightly alternative manner

class EmailChecker {

    constructor(private _registrationServices: RegistrationServices) { }

    checkAvailability(emailControl: AbstractControl): Promise<ValidationResult> {
        return this._registrationServices.validateEmail(antiForgeryToken(), emailControl.value)
            .then(res => {
                // Make sure to verify the outcome.
                return { "emailExists": true }
            })
 // concise .then(res => ({ "emailExists": true }))
            .catch(err => {
                // Should we inform about server issues? Probably not necessary.
                return { "serverIssue": true }
            });
 // concise .catch(error => ({ "serverIssue": true }))

        });

    }
}

Answer 8

I propose writing it in a slightly alternative manner

class EmailChecker {

    constructor(private _registrationServices: RegistrationServices) { }

    checkAvailability(emailControl: AbstractControl): Promise<ValidationResult> {
        return this._registrationServices.validateEmail(antiForgeryToken(), emailControl.value)
            .then(res => {
                // Make sure to verify the outcome.
                return { "emailExists": true }
            })
 // concise .then(res => ({ "emailExists": true }))
            .catch(err => {
                // Should we inform about server issues? Probably not necessary.
                return { "serverIssue": true }
            });
 // concise .catch(error => ({ "serverIssue": true }))

        });

    }
}

Unlocking 'this' Within a Promise

Answer №1

Answer №2

Proposed Solution

Answer №3

Answer №4

Similar questions

incorrect implementation of react lifecycle phases

Utilizing ngx-logger Dependency in Angular 6 for Efficient Unit Testing

Implementing Limited Results in Redis FT.SEARCH with TypeScript

Retrieve data from child routes within the parent component

Tips on accessing validator errors in Angular

When the Angular Reactive form control does not show any errors, it is designated as ng-invalid

Dynamically loading components within an Angular application

What is the best way to end a Google OAuth session using Firebase on an Ionic 2 application?

A guide to accessing parent attributes in Vue3 using typescript

Deploying an Angular application on AWS EC2 without using nginx as a reverse proxy

How to simulate a particular class from a node package using Jest mocks

The function did not return a Promise or value as expected when using async and await

Transferring css to an external file within an angular 4 component by utilizing webpack

The vertical scrolling feature seems to be malfunctioning within my angular 10 application

angular displaying incorrect values for counter

Finding a solution to the dilemma of which comes first, the chicken or the egg, when it comes to using `tsc

When creating a responsive datatable in Angular, be aware that the reference to "this.table

Differences Between Angular Module and Library

Angular 5 - Keeping track of variable updates

Creating TypeScript domain objects from JSON data received from a server within an Angular app