How to fix error - Property 'subscribe' does not exist on type 'void'?-CodePudding

I am facing this error, while creating a login form in the word subscribe under the submit function in the code below. The error says Property 'subscribe' does not exist on type 'void'. How can I go about fixing this issue? The code is as shown:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AuthService } from '../auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm!: FormGroup;
isSubmitted=false;
results: any = false;
  constructor(private formbuilder:FormBuilder, private authService: AuthService,
    private router: Router) { }

  ngOnInit() {
    this.loginForm = this.formbuilder.group({
      // email:['', [Validators.required, Validators.email]],
      name: ['',Validators.required],
      password: ['',Validators.required]
    });
    //loginForm.controls.email
    //use getter property instead
    //fc.email
  }
get fc(){
  return this.loginForm.controls;
}
submit(){
  this.isSubmitted = true;
  if(this.loginForm.valid)
  
  this.authService.authUser(this.loginForm.value.name, 
    this.loginForm.value.password).subscribe(data => { 
      //error lies in line above(underlined subscribe)
    this.results = data;
    if (this.results[0].auth) 
    {
    this.authService.setSecureToken(this.loginForm.value.name);
    this.router.navigateByUrl('/user');
    } else{
     console.log("Wrong username or password")
     }
    });
     }
     }

AuthUser function:

 authUser(username: string, pw: string) {
    return this.http.post<any[]>(this.authuser, {
      'username': username,
      'password': pw
    }),
    console.log('user registered!')
  }

CodePudding user response：

You are returning void instead of Observable as @Zerotwelve mentioned.

You can check the data type return by authUser() by typeof(authUser()).

In order to return an observable, you cannot call subscribe in authUser() function. If you do need to do something, you can use rxjs pipe and map.

For example:

authUser(usernameEmail: string, password: string): Observable<any> {
  this.http.post<any>('auth', { usernameEmail, password }).pipe(
    map((res) => {
      this.usernameMessage = res.message;
      return res.valid;
    })
  )
}

CodePudding user response：

You should show the code of authUser() in authService but it looks like it returns void instead of an Observable. Fix the code in authUser() in order to return an observable. I guess you are doing a HTTP call, therefore you don't need the subscribe() inside authUser

------ EDIT ------

you are passing authUser to authUser, I don't think you intend to make a recursive call here. You should put the url of the Backend there (a string)

 authUser(username: string, pw: string):Observable<any> {
    return this.http.post(YOUR_URL_HERE, {
      'username': username,
      'password': pw
    });
    console.log('user registered!'); // This will never be called because it's after the "return"
  }