Error : MISSING_EMAIL when trying to post data to a Firebase Server-CodePudding

I have a simple form with 2 inputs (username and password). I am trying to create a user with the respective username and password submitted by the form. I have a POST request which contains the correct URL API_key and the required body (email , password and returnSecureToken). But when I submit the form I get an error saying EMAIL_MISSING .

Error:

{
  "error": {
    "code": 400,
    "message": "MISSING_EMAIL",
    "errors": [
      {
        "message": "MISSING_EMAIL",
        "domain": "global",
        "reason": "invalid"
      }
    ]
  }
}

The email and pw are passed as parameters to the POST method when the form is submitted and I am returning the POST request from the service file. I then am subscribing to it in my component TS file to get the response in my component TS file. Please let me know how to solve this.

My API service:

  import { HttpClient } from "@angular/common/http";
  import { Injectable } from "@angular/core";

  @Injectable()
  export class authService {

    constructor(private http:HttpClient){}
    
    signUpUser(email:string , password:string){
        return (
                this.http.post<any>("https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=AIzaSyBv_CgjuTtiNaVgk8FFZTUHVhoqwG9vTso" , 
                {
                email : email , 
                password : password,
                returnSecureToken : true ,
                })

        )
    }
  }

I am now using this Post request in my authComponent.TS :

  import { Component, Injectable } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { authService } from './Auth.service';
  
  export class AuthComponent {
  
    constructor(private authService:authService){}
    
    onSubmit(f:NgForm){
      let email = f.value.email;
      let password = f.value.password
      console.log(f.value);
      this.authService.signUpUser(email , password).subscribe(
          response => {console.log(response)},
          error => {console.log(error)},
          );
    }
  }

Auth.HTML:

<h3>Welcome to Login Page</h3>
<form #f="ngForm" (ngSubmit)="onSubmit(f)">
    <div>
        <label>Username:</label>
        <div>
            <input type="text"
            ngModel
            required
            email
            name="username"
            #username="ngModel"
            >
            </div>
        <label>Password:</label>
            <div>
            <input type="password"
            ngModel
            required
            name="password"
            minlength="6"
            #password="ngModel"
            >
        </div>
        <div>
            <button 
             
            [disabled]="!password.valid" 
            type="submit">
            Login</button>
            <button 
             
            type="button">
            Sign Up</button>
        </div>
    </div>
</form>

CodePudding user response：

I can't see any value assign to your email and password when you pass it to signUpUser function.

Your authComponent.ts file should look like below:

import { Component, Injectable } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import { authService } from './Auth.service';
  
  export class AuthComponent {

  
    constructor(private authService:authService){}
    
    onSubmit(f:NgForm){
      console.log(f.value);
      // Assign value to variable
      const email = f.value.username;
      const password = f.value.password;

      this.authService.signUpUser(email , password).subscribe(
          response => {console.log(response)},
          error => {console.log(error)},
          );
    }
  }