Chrome error on page loading “ERROR TypeError: Cannot read property 'name' of undefined”

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 thorough "ERROR TypeError: Cannot read property 'name' of undefined" error while loading the page initially. I tried many other resources dont know how to solve this.

if (form)

if (true)

5 Answers
5

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

Safe Navigation Operator ( ?. )

employeeService?.selectedEmployee

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
;




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.

employeeService?.selectedEmployee.name

employeeService?.selectedEmployee

undefined

Fix

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

selectedEmployee

employeeService?.selectedEmployee?.name

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.

selectedEmplyee

employeeService

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 ();



@Krishna Rathore
Screenshot of StackBlitz

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.