Encountering "Cannot read property of undefined" error while invoking a function in a service in Angular 6

Having trouble calling a function within a service, as I keep getting the error message

Cannot read property 'authenticationService' of undefined

I have already initialized authenticationService in the constructor of my component.

The component code is shown below:

 export class RegisterComponent implements OnInit {
  // Component properties and methods here
}

The service code is displayed below:

@Injectable()
 export class AuthenticationService {
   // Service properties and methods here
}

Everything seems to work fine with the call to authenticationService in register() method. However, the checkEmailUnique method should be making a POST request to the backend to verify if an email already exists and return true or false.

Answer №1

When calling the validator from a different context, the authenticationService may not be available. To ensure the correct context is preserved, consider using an arrow function:

checkEmailUnique = (group: FormGroup) => {
 const mail = group.controls.email.value;
 const obj: any = {'email': mail, } ;
 this.authenticationService.checkEmailUnique(obj);
}

Additionally, since the checkEmailUnique function in authService returns Observable, asyncValidators will be needed.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to troubleshoot issues with the ng bootstrap package

Having an issue debugging ng-bootstrap 4 in my Angular 7 project, I decided to follow the instructions provided on this link to clone ng-bootstrap and install dependencies using yarn. The process completed without any errors. However, when attempting to np ...

Tips on extracting status response codes from the backend and incorporating them into the frontend

I have a Node.js backend and an Angular frontend, and I need to send status response codes from the backend to display an error message "Email already exists" on the frontend. // Frontend add.user.component.ts if (this.AddUserForm.valid) { this. ...

Exploring Angular Components with Jasmine and Karma while integrating third-party tools such as ExcelJS

Currently tackling the challenge of writing tests for a project using ExcelJS. The project runs smoothly in both build and production environments, but when attempting to incorporate unit tests for certain components, I'm encountering issues with Test ...

Restricting the React children property to only one element of each specified type using Typescript

Imagine having an Input component that could optionally receive a Button, Label, and/or Icon component. The order in which they are included does not matter. // Example of correct use <Input> <Button /> <Label /> <Icon /> </In ...

What advantages does using an RxJS Subject have over handling multiple event listeners individually in terms of speed

After investigating a page's slow performance, I identified an angular directive as the root cause. The culprit was a piece of code that registered event listeners on the window keydown event multiple times: @HostListener('window:keydown', ...

The functionality of crypto.randomBytes is not supported in Angular

I am utilizing the ethereumjs-wallet library in angular4, import EthereumWallet from 'ethereumjs-wallet'; var wallet = EthereumWallet.generate(); const jsV3 = wallet.toV3(passwd); the code snippet inside the library is displayed below var pri ...

Processing a list in Angular using Observables

In my Angular12 application, I am fetching data from a Firebase Realtime DB using AngularFire. To streamline my code and ensure consistency, I have implemented a DAO service to preprocess the retrieved data (e.g., converting string dates to Date objects). ...

Navigating the Angular Upgrade in the New Year of 2022

After browsing through https://update.angular.io/?v=12.0-13.0, I came across some instructions to update Angular in Visual Studio. npx @angular/cli@13 update @angular/core@13 @angular/cli@13 Everything seemed fine, but I became puzzled by the different ...

Potentially null object is present in a callback

The code I have is as follows: let ctx = ref.current.getContext("2d"); if(ctx){ ctx.lineWidth=1; // this line executes without errors ctx.strokeStyle=props.barStroke??"darkgray";// this line execut ...

You cannot invoke this expression while destructuring an array of React hooks in TypeScript

Within my React TypeScript component, I have several fields that check a specific condition. If the condition is not met, the corresponding field error is set to true in order to be reflected in the component's DOM and prevent submission. However, whe ...

Why is the useContext array appearing empty when accessed in a function within the same context, despite being pre-populated?

I am encountering an issue with my useContext setup, where I provide all logged-in users. When the app runs initially or when users log in, the array is populated with all current users on the server, which works as intended. However, when the "user-connec ...

Can you explain the mechanics behind Angular Component CSS encapsulation?

Is it possible to avoid CSS conflicts when using multiple style sheets? Consider Style 1: .heading { color: green; } And Style 2: .heading { color: blue; } If these two styles are applied in different views and rendered on a layout as a Partial Vi ...

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

Assigning union values to an object array: a guide for Typescript

When working with union typed values in an object array, how should the setState() function be implemented? enum SomeStateEnum { IsRunning, Name, } type PersonState = { [SomeStateEnum.IsRunning]: boolean; [SomeStateEnum.Name]: string; }; const st ...

What is the best way to set a JSON string as a variable?

I am attempting to send form input data to a REST service. Currently, the format is as follows: { "locationname":"test", "locationtype":"test", "address":"test" } However, the service is only accepting the following format: { "value": "{ loca ...

Troubleshooting vague errors with uploading large files in Golang's net/http protocol

I've encountered a challenging error while uploading large files to a server built with Golang's default net/http package. The upload process is defined as follows: uploadForm.onsubmit = () => { const formData = new FormData(uploa ...

Converting a string into a Date in Typescript while disregarding the timezone

Upon receiving a date in string format like this (e.g.): "11/10/2015 10:00:00" It's important to note that this is in UTC time. However, when creating a Date object from this string, it defaults to local time: let time = "11/10/2015 10:00:00"; let ...

Best practice for importing pipeable RxJs operators in Angular CLI/WebPack rollup

In the earlier versions of Angular CLI, specifically those before 1.5.0, it was common practice to import all RxJs operators and statics into a single file for easy usage throughout the application. For example: rxjs-operators.ts // Statics import &apos ...

Encountering a type error in Typescript when assigning a transition component to a Material UI Snackbar

Attempting to implement snackbar alert messages using Material UI in a React JS application with TypeScript. Encountering a type error when trying to modify the transition direction of the snackbar. Referenced the snackbar demo from Material UI documentat ...

Module 'fs' or its type declarations could not be located

I am facing an issue with TypeScript not recognizing the 'fs' module. The error I receive is as follows: Error: src/app/components/drops/drops-map/drops-map.component.ts:9:29 - error TS2307: Cannot find module 'fs' or its correspond ...