Cannot read property 'id' of undefined UsersReportingComponent.html

Question

users.reporting.component.html:

<div class="container"

    <form (ngSubmit)="processForm()">

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

        <div class="form group">
            <label for="email">Email</label>
            <input type="email" name="email" class="form-control" [(ngModel)]="user.email">
        </div>
        <div class="form group">
            <label for="date">Joining Date</label>
            <input type="date" name="date" class="form-control" [(ngModel)]="user.date">
        </div>
        <div class="form group">
            <label for="address">Addrress</label>
            <input type="text" name="address" class="form-control" [(ngModel)]="user.address">
        </div>

        <div class="form group">
            <label for="status">Status</label>
            <input type="text" name="status" class="form-control" [(ngModel)]="user.status">
        </div>

        <input type="submit" value="save" class="btn btn-success">
    </form>
</div>                                        

users.reporting.component.ts:

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/user';
import { UserService } from 'src/app/shared_service/user.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-users-reporting',
  templateUrl: './users-reporting.component.html',
  styleUrls: ['./users-reporting.component.css']
})
export class UsersReportingComponent implements OnInit {      
  private user: User;

  constructor(private _userService: UserService, private _router: Router) { }

  ngOnInit() {
    this.user = this._userService.getter();            
  }
  processForm() {
    if (this.user.id == undefined) {
      this._userService.createUser(this.user).subscribe((user) => {
        console.log(user);
        this._router.navigate(['/user-listing']);
      }, (error) => {
        console.log(error);
      });
    } else {
      this._userService.updateUser(this.user).subscribe((user) => {
        console.log(user);
        this._router.navigate(['/user-listing']);
      }, (error) => {
        console.log(error);
      });
    }
  }
}

Please help me out... I have an error in my project, the error is like this:

ERROR TypeError: Cannot read property 'id' of undefined
at Object.eval [as updateDirectives] (UsersReportingComponent.html:53)
at Object.debugUpdateDirectives
at checkAndUpdateView
at callViewAction
at execComponentViewsAction
at checkAndUpdateView
at callViewAction
at execEmbeddedViewsAction
at checkAndUpdateView
at callViewAction

Answer 1

You never set user:

export class UsersReportingComponent implements OnInit {
   user: User = new User();

  //...
}

Make sure to initialise your class fields before ngOnInit by setting it in the constructor or directly on the field, or use the ?. save navigation operator inside your template: [(ngModel)]="user?.id"

Also as stated in the comments, don't make your user field private, because otherwise the AOT compilation will fail

Answer 2

It seems to me that you have to change this:

private user: User;

to this:

public user: User;

Private properties are only available inside the class but template is outside.

Answer 3

It looks like you are retrieving user data using this._userService.getter(); in ngOnInit(). You could use *ngIf to test whether the user has been loaded prior to rendering the form to avoid this error:

<form (ngSubmit)="processForm()" *ngIf="user">
// ...
</form>

Another option would be to simply initialize some default values like '' for string for the user object until the getter() has resolved:

user: User = {
  id: 42,
  name: '',
  email: '',
  // ... remaining properties
}

Also, are you sure you are using getter() correctly? Assuming your call is something along the lines of:

getter()
  return this.http.get<User>('/some/api/url')
}

You'd consume that like:

ngOnInit() {
  this._userService.getter().subcribe(user => this.user = user);
}

Hopefully that helps!