Vfrdtyky

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

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

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.

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!