Angular Cannot read properties of undefined (reading 'username')-CodePudding

i'm trying to implement a "Create" function to create appointements and i'm also adding the User id who created the appointement,so i created a model of "rendezvous" and "user" but i when i execute the project the console shows an error of core.mjs:7643 ERROR TypeError: Cannot read properties of undefined (reading 'id') at CreateRendezvousComponent_Template (create-rendezvous.component.html:45:9) at executeTemplate (core.mjs:12114:9) at refreshView (core.mjs:11977:13) at refreshComponent (core.mjs:13073:13) at refreshChildComponents (core.mjs:11767:9) at refreshView (core.mjs:12027:13) at refreshComponent (core.mjs:13073:13) at refreshChildComponents (core.mjs:11767:9) at refreshView (core.mjs:12027:13) at refreshEmbeddedViews (core.mjs:13027:17)

the error comes from the HTML of "create-rendezvous" component

        <label>Etat</label>
        <input type="text"  id="etat"
        [(ngModel)]= "rendezvous.etat" name="etat">
    </div>
   <div >
        <label>user id</label>
        <input type="number"  id="user.id"
        [(ngModel)]= "rendezvous.user.id" name="user.id">
    </div>
     <button  type="submit">Ajouter</button>

</form>

</div>

this is my "Create" function in the "create-rendezvous" component

saveRendezVous(){
    this.rendezvousService.createRendezvous(this.rendezvous).subscribe(data=>{
         console.log(data);
         this.goToRendezvousList();
        
    }, 
    error=>console.log(error));
  }

and this is my function in the angular service

createRendezvous(rendezvous:Rendezvous): Observable<Object>{
    return this.httpClient.post(`${this.baseUrl}`, rendezvous);

  }

i appreciate your help.

CodePudding user response：

import { User } from "./user";

export class Rendezvous {
    idRdv!:number;
    nom_client!: String;
    prenom_client!: String;
    commentaire!: String;
    numtel!: number;
    date_rdv!: Date;
    etat!: Boolean;
    user!:User;
}

export class User {
    id!:number;
    username!:String;
    email!:String;
    password!: String;

}

these are my models ,i'm using spring 2.7 and angular 14.

CodePudding user response：

undefined would mean that you were trying to call the id property of an object that has not been initialized yet. Verify that not only is your rendezvous object is defined and initialized, but that the user object for it is initialized as well.

Likewise verify the user object itself is defined. If it is something that is only defined after some sort of API call to load the data then add some sort of loading state