title: how i can resolve the error Cannot read property 'prenom' of undefined?
body: <p>I'm developing a user registration page and I'm using angular on the front side and spring boot side back, the problem I get is this error when starting my application:</p>
  
  <p><a href="https://i.stack.imgur.com/QzQd5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QzQd5.png" alt="the error"></a></p>
  
  <p>this is my user class :</p>
  
  <pre><code>export class User {
  
     constructor (
  
      IDENTIFIANT: Number,
      EMPLOI: Number,
      ENTITE: Number,
      LOGIN: string,
      MOTDEPASSE: string,
      NOM: string,
      PRENOM: string,
      STATUT: string,
      DATEEFFET: Date,
      DATEFIN: Date,
      CREELE: Date,
      CREEPAR: Date,
      MOTIFDEDESACTIVATION: string,
      ANNULEPAR: number,
      ANNULELE: Date,
      EMAIL: string,
      CONFIRMATIONMOTDEPASSE: string
     ){}
  }
  </code></pre>
  
  <p>and this is my component.html :</p>
  
  <pre><code>&lt;div class="inscription"&gt;
  
      &lt;!-- Default form register --&gt;
      &lt;form class="text-center border border-light p-5"&gt;
  
          &lt;p class="h4 mb-4"&gt;Sign up&lt;/p&gt;
  
          &lt;div class="form-row mb-4"&gt;
              &lt;div class="col"&gt;
                  &lt;!-- First name --&gt;
                  &lt;input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom"&gt;
              &lt;/div&gt;
              &lt;div class="col"&gt;
                  &lt;!-- Last name --&gt;
                  &lt;input type="text" id="nom" class="form-control" [(ngModel)]="user.nom" placeholder="Votre nom"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- E-mail --&gt;
          &lt;input type="email" id="email" class="form-control mb-4" [(ngModel)]="user.email" placeholder="Votre email"&gt;
  
  
          &lt;!-- Login --&gt;
          &lt;input type="text" id="login" class="form-control mb-4" [(ngModel)]="user.login" placeholder="Votre login"&gt;
  
          &lt;!-- Password --&gt;
          &lt;input type="password" id="password" class="form-control" [(ngModel)]="user.motdepasse" placeholder="Votre mot de passe"
              aria-describedby="defaultRegisterFormPasswordHelpBlock"&gt;
  
  
          &lt;!-- Confirmation mot de passe --&gt;
          &lt;input type="password" id="password-confirmation" class="form-control"
              placeholder="Confirmez votre mot de passe" [(ngModel)]="user.confirmationmotdepasse" aria-describedby="defaultRegisterFormPasswordHelpBlock"&gt;
  
  
          &lt;!-- Entite --&gt;
  
              &lt;select class="form-control" id="entite" [(ngModel)]="user.entite"&gt;
                  &lt;option value="" selected disabled&gt;Votre entité&lt;/option&gt;
                  &lt;option&gt;1&lt;/option&gt;
                  &lt;option&gt;2&lt;/option&gt;
                  &lt;option&gt;3&lt;/option&gt;
                  &lt;option&gt;4&lt;/option&gt;
                  &lt;option&gt;5&lt;/option&gt;
              &lt;/select&gt;
  
          &lt;!-- Emploi --&gt;
  
  
          &lt;select class="form-control" id="emploi" [(ngModel)]="user.emploi"&gt;
              &lt;option value="" selected disabled &gt;Votre emploi&lt;/option&gt;
              &lt;ul class="list-unstyled navbar-list"&gt;
  
                  &lt;li *ngFor="let tempAllEmploi of allEmploi"&gt;
  
                      &lt;option&gt;{{ tempAllEmploi.NOM}}&lt;/option&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
  
          &lt;/select&gt;
  
  
          &lt;!-- Sign up button --&gt;
          &lt;button mdbBtn color="info" block="true" class="my-4" type="submit" id="btn-inscription" class="btn-primary btn-lg" (click)="inscriptionts()"&gt;Valider&lt;/button&gt;
  
  
      &lt;/form&gt;
      &lt;!-- Default form register --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>focus more on this code :</p>
  
  <pre><code>&lt;input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom"&gt;
  </code></pre>
  
  <p>you can see here that I created the user class which has a "first name" variable and that I used the ngModel with user.prenom in my html code, so I don't see where the error can come from  :/</p>
  
  <p>this is my component.ts :</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { User } from 'src/app/model/user';
  import { RestapiService } from 'src/app/restapi.service';
  import { Emploi } from 'src/app/model/emploi';
  
  @Component({
    selector: 'app-inscription',
    templateUrl: './inscription.component.html',
    styleUrls: ['./inscription.component.css']
  })
  export class InscriptionComponent implements OnInit {
  
    allEmploi: Emploi[];
    user: any;
    //user: Users= new Users(0,0,0,"","","","","",new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),new Date("dd-mm-yyyy"),"",0,new Date("dd-mm-yyyy"),"","");
  
  
    constructor(private Userservice: RestapiService) { }
  
    ngOnInit(): void {
  
      this.getAllEmploi();
    }
  
    public getAllEmploi(){
  
      this.Userservice.getEmploi().subscribe(
  
        data =&gt; {
          this.allEmploi=data;
        }
      );
    }
  
  
    public inscriptionts(){
  
      let resp=this.Userservice.inscription(this.user);
      resp.subscribe((data)=&gt; this.user=data);
    }
  }
  </code></pre>
  
  <p>and this is my service :</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { HttpClient, HttpHeaders } from '@angular/common/http';
  import { Emploi } from './model/emploi';
  import { Observable } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class RestapiService {
  
    url_getAllEmploi="http://localhost:8484/emploi/getall";
  
    constructor(private http:HttpClient) { }
  
    public inscription(user) {
  
      return this.http.post("http://localhost:8484/addUser", user);
    }
  
  
    public getEmploi(): Observable&lt;Emploi[]&gt; {
  
      return this.http.get&lt;Emploi[]&gt;(this.url_getAllEmploi);
    }
  
  
    public login(username:string, password:string) {
      const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)})
      return this.http.get("http://localhost:8484/", {headers, responseType:'text' as 'json'});
    }
  
    public getUsers() {
      let username="hr";
      let password="hr";
      const headers = new HttpHeaders({Authorization: 'Basic ' + btoa(username+":"+password)});
      return this.http.get("http://localhost:8484/getUsers", {headers});
    }
  }
  </code></pre>
  
  <p>can someone help me please ? </p>