Validation of forms using the server

I am facing an issue with my form validation in which I am trying to check the existence of an email through HTTP validation, but encountering an error. Here is a snippet of my code:

Within the form component

 constructor(
   private _formBuilder:FormBuilder,
    private _validationService:ValidationService
  ) { }

 ngOnInit() {
this.resetForm = this._formBuilder.group({
  email:['',Validators.compose([
    this._validationService.emailExistsValidator  
   ,Validators.required
  ])]
})

In the validationService

  constructor(
public _authService:AuthService  
 ){}

  emailExistsValidator(control){
  if(control.value != undefined) {
  this._authService.checkExists("email")
      .map(response => {
        if (!response) {
           return {'emailNotExists': true};
        }
      });
   }
}

Within the _authservice (a service)

checkExists(value:string):Observable<any>{
return this._httpclient.get(this.authurl+value) 
  .map(response => {
   return response
  });
}

However, I am encountering the following error message:

Argument of type '((control: any) => void)[]' is not assignable to4 parameter of type 'ValidatorFn[]'.
  Type '(control: any) => void' is not assignable to type 'ValidatorFn'.
Type 'void' is not assignable to type '{ [key: string]: any; }'.)

Can anyone provide guidance on how to resolve this issue?

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

What is the best way to declare a string variable that will be set at a later time?

When working with TypeScript and having a variable named endpoint that will later be assigned by an API call, what is the best practice for initializing the endpoint? Should it be initialized to null, undefined, or an empty string ''? ...

What is the best way to implement the useCallback hook in Svelte?

When utilizing the useCallback hook in React, my code block appears like this. However, I am now looking to use the same function in Svelte but want to incorporate it within a useCallback hook. Are there any alternatives for achieving this in Svelte? con ...

Having difficulty grasping the significance of the data received from the API response

Currently, as I am working on my personal Portfolio for a Web Developer course, I have encountered an issue with correctly implementing my API to retrieve information from the database. Previously, I faced no problem when using a .json file, but now, I am ...

Error with constructor argument in NestJS validator

I've been attempting to implement the nest validator following the example in the 'pipes' document (https://docs.nestjs.com/pipes) under the "Object schema validation" section. I'm specifically working with the Joi example, which is fun ...

Encountering a compatibility issue while trying to launch an Angular project

Encountered an error message 'Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class" while attempting to run my Angular project. Here are the specifications: Angular ...

Tips for building an Angular app with Vite hosting

Looking to build an Angular application using Vite with simple routing, limited features, and no test files while running on port 5000. I have scoured the internet but haven't found a solution yet. ...

Ways to implement type checking for vuex commit using TypeScript

In the Vuex store, I have an action tree structured like this export const actions: SalaryActionTree<SalaryState, RootState> = { async setSalaryOperationUnpaidListByUserId( {commit}, {user_id, pageNum}) { try { let res ...

Performance issues with the Django API causing significant delays in data retrieval

Currently, I am working on integrating Angular2 with Django (a Python framework). I have successfully created a basic API in Django that displays all the records from the database. You can access the API via the following link: [https://djangoshopnroar.he ...

Having trouble toggling the Bootstrap Navbar

I'm struggling to understand why my collapsed navbar menu isn't opening. I am working with Angular 4 (cli), Bootstrap 4.0.0-beta, and sass. Additionally, I'm using ngx-bootstrap. Here is the HTML: <nav class="navbar navbar-expand-lg nav ...

Creating a Fixed HeaderToolbar in FullCalendar React

I am currently working on customizing the FullCalendar React component and I am looking to incorporate a sticky headerToolbar. My main objective is to have the header along with its toolbar remain fixed at the top of the calendar, even when users scroll th ...

Exploring the concept of object inheritance in Angular 5 with Typescript

I'm facing a challenge related to inheritance while building my initial angular 5 application. The error message I encounter is: Property 'message' does not exist on type 'CouponEvent', as reported by the angular-cli. export class ...

Should Angular libraries be developed using Typescript or transpiled into JavaScript?

Currently, I am in the process of developing a library that will be available as an Angular module through npm. The library itself has been written using typescript. Everything was functioning perfectly up until Angular version 5.0.0, but after this update ...

Using Typescript to overload functions with varying first parameters

I am facing a scenario where I have a parent class that requires a method implementation with either one or two parameters depending on the child class. class MyClass { update(obj: HashMap); update(id: ID, obj: HashMap); update(objOrId: HashM ...

Prisma atomic operations encounter errors when attempting to update undefined values

According to the Prisma Typescript definition for atomic operations, we have: export type IntFieldUpdateOperationsInput = { set?: number increment?: number decrement?: number multiply?: number divide?: number } Let's take a look at the Pris ...

What is the method to select and activate the second item in the list within the second unordered list?

This is a unique text that I am using to test the footer element of a website. await page.waitForSelector(".footer-menu", {timeout: 10000}) const unorderedList = await page.locator('.footer-menu:nth-child(1) li:nth-child(2)'); un ...

What is the logic behind using interfaces to declare functions in TypeScript and what exactly is the purpose behind it?

interface SearchFunc { (source: string, subString: string): boolean; } It is common for me to define a function in this manner: type Search = (source:string,subString:string)=>void I am curious about why TypeScript allows the use of interfaces to de ...

Is there a way to convert a JavaScript object to a class while eliminating unnecessary properties?

In my current project, I am using Typescript with ExpressJS to build APIs. Let's say I have a typescript User model defined as follows: class UserModel { id: number; email: string; password: string; name: string; dob: Date; ge ...

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments ...

Experimenting with Angular Effect combined with GraphQL Apollo client

Trying to implement a new effect but struggling with spying on the valueChanges property in the watch method @Effect() signup$: Observable<Action> = this.actions$.pipe( ofType(AuthActionTypes.SIGNUP), map((action: Signup) => action.payloa ...

Migration of Angular dynamic forms project - The error "input" does not have an initializer or a constructor, and another issue with Type T | undefined

Angular dynamic forms project migration - encountering Type T | undefined error In my quest to find a sample project demonstrating the creation of Angular forms using JSON datasets, I stumbled upon this repository: https://github.com/dkreider/advanced-dyn ...