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

Question

add-employee.html

<div class="col-md-6 offset-md-3">
<h3> Create Employee </h3>
<form (ngSubmit) = "onSubmit()">

    <div class="form-group">
        <label>Name</label>
        <input type="text" class ="form-control" id = "employeename"
            [(ngModel)] = "employee.employeename" name = "employeename">
    </div>

    <div class="form-group">
        <label>Age</label>
        <input  class ="form-control" id = "age"
        [(ngModel)] = "employee.age" name = "age">
    </div>

    <button class = "btn btn-success" type ="submit">Submit</button>

</form>
</div> 

add-employee.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../employee';
import { EmployeeserviceService } from '../employeeservice.service';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-add-employee',
  templateUrl: './add-employee.component.html',
  styleUrls: ['./add-employee.component.css']
})
export class AddEmployeeComponent implements OnInit {

  employee !: Employee;

  constructor(private employeeService:EmployeeserviceService) { }

  ngOnInit(): void {
  }

onSubmit(){
  console.log(this.employee);
  
  this.employeeService.saveEmployee(this.employee).subscribe(data=>{
    console.log(data);
  })
}

}

employee.ts

export class Employee {
    id: number;
    employeename : string;
    age:number;

    constructor(id:number,employeename:string,age:number){
        this.id=id;
        this.employeename=employeename;
        this.age=age;
    }
}

I am new to angular and I am trying to create a sample employee CRUD application for hands on experience. But while creating POST API creation I am getting "cannot read property employeename" I don't know where I done a mistake can anyone please help me solve this issue?

Thanks in advance.

Answer 1

The first problem as mentioned in the comment that you miss out to initialize the Employee instance to employee variable before using it. Initialize the instance to employee variable would fix the issue.

export class AddEmployeeComponent implements OnInit {

  ...

  ngOnInit(): void {
    this.employee = new Employee(0, "", 0);
  }

  ...

}

---

For hiding the initialize age value ( 0 ), you may consider applying age property in Employee class as nullable.

export class Employee {
    id: number;
    employeename: string;
    age: number | null;

    constructor(id: number, employeename: string, age: number | null){
        this.id=id;
        this.employeename=employeename;
        this.age=age;
    }
}

And initialize age as null .

export class AddEmployeeComponent implements OnInit {

 ...

  ngOnInit(): void {
    this.employee = new Employee(0, "", null);
  }

  ...
}