I am trying a post request using a form containing email and password and sending it to backend to validate a user from backend(Spring Boot) and return the entire data of user using JSON from Backend to angular so that it can be passed further. But I am facing the above issue in form while trying to fetch data using NgSubmit. Even in Controller I am get null values.

Angular version: 13.3.7

Typescipt version: 4.6.4

login.component.html

    <form  (ngSubmit)="loginUser()">
  <div >
    <label for="exampleInputEmail1" >Email address</label>
    <!-- In input ngModel "? and !" is used to prevent undefinied error -->
    <input
      type="email"
      
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      placeholder="Enter email"
      name="email"
      [(ngModel)]="userDO?.loginDO.email"
    />
    <small id="emailHelp" 
      >We'll never share your email with anyone else.</small
    >
  </div>
  <div >
    <label for="exampleInputPassword1" >Password</label>
    <input
      type="password"
      
      id="exampleInputPassword1"
      placeholder="Password"
      name="password"
      [(ngModel)]="userDO?.loginDO.password"
    />
  </div>
  <div >
    <button type="submit" >Submit</button>
    <button type="button" >Forget Password?</button>
  </div>
  <div ></div>
  <a  routerLink="signup">New around here? Sign up</a>
</form>

login.component.ts

import { Component, OnInit } from '@angular/core';
import { CreateUser } from 'src/app/CreateUser';
import { LoginService } from 'src/app/service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  // @ts-ignore: Object is possibly 'null'.
  userDO!: CreateUser = new CreateUser();
  constructor(private postRequest : LoginService) { 
  }
  loginUser()
  {
    console.log("Login component");
    console.log(this.userDO);
    this.userDO = this.postRequest.fetchUser(this.userDO);
  }
  ngOnInit(): void {
  }

}

CreateUser.ts

import { LoginUser } from "./LoginUser";

export class CreateUser {
    firstName!: string;
    lastName!: string;
    birthdayDate!: string;
    gender!:  string;
    country!: string;
    phoneNumber!: string;
    loginDO !: LoginUser;
}

LoginUser.ts

export class LoginUser {
    email!: string;
    password!: string;
}

login.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { CreateUser } from '../CreateUser';

@Injectable({
  providedIn: 'root'
})
export class LoginService {
  user : CreateUser = new CreateUser();
  private baseUrl:string = "http://localhost:8080";
  constructor(private http:HttpClient) {
  }

  fetchUser(userData: CreateUser) : CreateUser
  {
    console.log("Login service");
      this.http.post<CreateUser>(`${this.baseUrl}/login`, userData).subscribe((data: any) => {
      this.user = data;
      });
      return this.user;
    }
}

Please check below link for error image that I got in console enter image description here

CodePudding user response：

In the attributes of your class createUser you also have another class loginUser. During creation of the createUser you do not initialise this attribute with a new LoginUser()

In your createUser class you will need to add a constructor where you do this.