"ERROR TypeError: Cannot read property 'name' of undefined" in Angular 6

Question

This is my employee.component.html

<div class="row">
  <div class="input-field col s12">
    <input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee.name" placeholder="Enter full name"
      required>
    <label>Name :
      <label class="red-text">*</label>
    </label>
  </div>
</div>

Below one is the employee.component.ts

import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms';
import { EmployeeService } from '../shared/employee.service';
import { Employee } from '../shared/employee.model';


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

  constructor(public employeeService: EmployeeService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();
      this.employeeService.selectedEmployee = {
        name: '',
        position: '',
        office: '',
        salary: null
      };
    }
  }

}
    

Chrome throw "ERROR TypeError: Cannot read property 'name' of undefined" error while loading my angular initial load.

Answer 1

Cannot read property 'name' of undefined”

Means that some reference to name is wrong. There is only one in your code : employeeService?.selectedEmployee.name , therefore employeeService?.selectedEmployee is undefined .

Fix

Make sure selectedEmployee is not undefined, or use safe navigation employeeService?.selectedEmployee?.name

Answer 2

Try this.

<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee?.name" placeholder="Enter full name" required>

Add another ? after the selectedEmplyee . It will solve the problem.

The reason for the error is when the application starts the selectedEmplyee in employeeService is undefined. So make sure that variable is not undefined .

Answer 3

add Safe Navigation Operator ( ?. ) becouse of employeeService?.selectedEmployee undefined

Stackblitz demo

component.html

<input type="text" name="name" #name="ngModel" [(ngModel)]="employeeService?.selectedEmployee.name" placeholder="Enter full name" required>

component.ts

import { Component,ViewChild } from '@angular/core';
import { EmployeeService } from './employee.service';
import {NgForm} from '@angular/forms';

@ViewChild('myForm') myForm:any;
  constructor(public employeeService: EmployeeService) { }

  ngOnInit() {
    this.resetForm(this.myForm);
  }

  resetForm(form?: NgForm) {
    if (form) {
      form.reset();
      this.employeeService.selectedEmployee = {
        name: '',
        position: '',
        office: '',
        salary: null
      };
    }
  }

Answer 4

you need to instantiate the employeeService.selectedEmployee object so it won't be undefined instantiate the object in the constructor or ngOnInit() and you can not use Safe Navigation Operator ( ?. ) in ngModel

eg:

 ngOnInit(){
this.employeeService.selectedEmployee=new Employee ();
    }

Answer 5

@Krishna Rathore StackBlitz 的截图