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

What is the best way to allocate string types from an enum using Typescript?

Securing Your Angular 2 / ASP.NET MVC Application from CSRF Attacks

Sharing functions between Angular components

What is the method for displaying script commands within package.json files?

Clicking on a single checkbox causes the entire input to become deactivated due to the way the system is

What is the process for initiating an Angular 2 Materialize component?

Issue encountered with the inability to successfully subscribe to the LoggedIn Observable

Modify the name of the document

When incorporating a second overload as an object, it is generating a pair of errors

What is the best way to guarantee an Array filled with Strings?

The Angular library files built with ng build are not automatically included in the dist folder

There has been an unhandled runtime error: [object ProgressEvent] occurring with Next.js/Typescript

Issue with Angular drag and drop functionality arises when attempting to drop elements within an n-ary tree structure displayed using a recursive template

Dealing with "Cannot find name" errors in Typescript when working with React components

Incorporate a pair of functions within the (click) directive in Angular 5

The HttpPut request code format is malfunctioning, although it is effective for another request

Accessing Angular's Observable Objects

What is the best way to securely store a JWT Token received from Cognito after logging in through the Cognito Hosted UI?

Tips on integrating ActiveX controls in Angular

Working with Typescript to map and sort the key values of a new datasource object