Angular:: ERROR TypeError: Cannot read properties of undefined (reading 'email')

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 class="container my-5" (ngSubmit)="loginUser()">
  <div class="form-group my-3">
    <label for="exampleInputEmail1" class="my-2">Email address</label>
    <!-- In input ngModel "? and !" is used to prevent undefinied error -->
    <input
      type="email"
      class="form-control"
      id="exampleInputEmail1"
      aria-describedby="emailHelp"
      placeholder="Enter email"
      name="email"
      [(ngModel)]="userDO?.loginDO.email"
    />
    <small id="emailHelp" class="form-text text-muted"
      >We'll never share your email with anyone else.</small
    >
  </div>
  <div class="form-group my-3">
    <label for="exampleInputPassword1" class="my-2">Password</label>
    <input
      type="password"
      class="form-control"
      id="exampleInputPassword1"
      placeholder="Password"
      name="password"
      [(ngModel)]="userDO?.loginDO.password"
    />
  </div>
  <div class="text-center">
    <button type="submit" class="btn btn-primary my-3 mx-5">Submit</button>
    <button type="button" class="btn btn-warning">Forget Password?</button>
  </div>
  <div class="dropdown-divider "></div>
  <a class="dropdown-item" 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

>Solution :

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.