how i can resolve the error Cannot read property 'prenom' of undefined?

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:

this is my user class :

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
   ){}
}

and this is my component.html :

<div class="inscription">

    <!-- Default form register -->
    <form class="text-center border border-light p-5">

        <p class="h4 mb-4">Sign up</p>

        <div class="form-row mb-4">
            <div class="col">
                <!-- First name -->
                <input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">
            </div>
            <div class="col">
                <!-- Last name -->
                <input type="text" id="nom" class="form-control" [(ngModel)]="user.nom" placeholder="Votre nom">
            </div>
        </div>

        <!-- E-mail -->
        <input type="email" id="email" class="form-control mb-4" [(ngModel)]="user.email" placeholder="Votre email">


        <!-- Login -->
        <input type="text" id="login" class="form-control mb-4" [(ngModel)]="user.login" placeholder="Votre login">

        <!-- Password -->
        <input type="password" id="password" class="form-control" [(ngModel)]="user.motdepasse" placeholder="Votre mot de passe"
            aria-describedby="defaultRegisterFormPasswordHelpBlock">


        <!-- Confirmation mot de passe -->
        <input type="password" id="password-confirmation" class="form-control"
            placeholder="Confirmez votre mot de passe" [(ngModel)]="user.confirmationmotdepasse" aria-describedby="defaultRegisterFormPasswordHelpBlock">


        <!-- Entite -->

            <select class="form-control" id="entite" [(ngModel)]="user.entite">
                <option value="" selected disabled>Votre entité</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>

        <!-- Emploi -->


        <select class="form-control" id="emploi" [(ngModel)]="user.emploi">
            <option value="" selected disabled >Votre emploi</option>
            <ul class="list-unstyled navbar-list">

                <li *ngFor="let tempAllEmploi of allEmploi">

                    <option>{{ tempAllEmploi.NOM}}</option>
                </li>
            </ul>


        </select>


        <!-- Sign up button -->
        <button mdbBtn color="info" block="true" class="my-4" type="submit" id="btn-inscription" class="btn-primary btn-lg" (click)="inscriptionts()">Valider</button>


    </form>
    <!-- Default form register -->

</div>

focus more on this code :

<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" placeholder="Votre prenom">

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 :/

this is my component.ts :

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 => {
        this.allEmploi=data;
      }
    );
  }


  public inscriptionts(){

    let resp=this.Userservice.inscription(this.user);
    resp.subscribe((data)=> this.user=data);
  }
}

and this is my service :

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<Emploi[]> {

    return this.http.get<Emploi[]>(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});
  }
}

can someone help me please ?

Solution

You are binding your form field to an undefined object (user). You need to initialise user in ngOnInit(). If you don't have any function in your class you can simply use an Interface.

export interface User {
    identifiant: Number,
    emploi: Number,
    entite: Number,
    login: string,
    motdepasse: string,
    nom: string,
    prenom: string,
    statut: string,
    dateeffet: Date,
    datefin: Date,
    creele: Date,
    creepar: string,
    motifdedesactivation: string,
    annulepar: number,
    annulele: Date,
    email: string,
    confirmationmotdepasse: string
}

Then

export class InscriptionComponent implements OnInit {

  allEmploi: Emploi[];
  user: User;

  ngOnInit(): void {
    this.getAllEmploi();
    this.user = {
        identifiant: null,
        emploi: null,
        entite: null,
        login: "",
        motdepasse: "",
        nom: "",
        prenom: "",
        statut: "",
        dateeffet: null,
        datefin: null,
        creele: null,
        creepar: "",
        motifdedesactivation: "",
        annulepar: null,
        annulele: null,
        email: "",
        confirmationmotdepasse: ""
  }
}

Also be careful about your use of [(ngModel)] within a form. You need to set the name attributes for your controls like this

<input type="text" id="prenom" class="form-control" [(ngModel)]="user.prenom" name="prenom" placeholder="Votre prenom">