CODEWITHSUNDEEP
angularforms
Manushi
Manushi

Reputation: 759

Cannot read property 'name' of undefined - Angular 6. Error repeats with all fields

I get the error in the title when I execute the below code. I understand it is a very minute mistake but not able to find a solution in any of the other threads. I am learning on my own and need your help.

app.component.html

<app-person [person]="Person"></app-person>

I have a person.component.ts with following code

person.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css']
})
export class PersonComponent implements OnInit {
  person: any
  @Input('person') personObj: Person;

  constructor() { }

  ngOnInit() {
    this.person = {
        // **Error is pointing this code here**  
         name: this.personObj.name,
         email: this.personObj.email,
         dateOFBirth: this.personObj.dateOFBirth
    };
  }

}

person.component.html

    <form #frm="ngForm" novalidate>
      <fieldset>
        <legend>Registration:</legend>
        <div class="form-field">
          Name:
          <input type="text" [(ngModel)]="person.name" name="name">

          <br>
        </div>

        <div class="form-field">
          Email:
          <input type="email" [(ngModel)]="person.email" name="email"> {{email}}
          <br>
        </div>

        <div class="form-field">
          Date of birth:
          <input type="date" [(ngModel)]="person.dateOFBirth" name="dateOFBirth"> {{dateOfBirth}}
        </div>
      </fieldset>

      <p>
        <button class="btn btn-success">Register</button>
      </p>
      <pre>{{person|json}}</pre>

    </form>
  {{frm.value|json}}

person.model.ts

export class Person {
    name:string;
    email:string;
    dateOFBirth:Date;
}

app.component.ts

import { Component } from '@angular/core';
import { Person } from './person/person.model';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'formsDemo';

  person: Person;



  constructor() {
    this.person = new Person();
    this.person.name = "Sample";
    this.person.email = "email";
    this.person.dateOFBirth = new Date("1988-08-01");

  }



  createPerson() {

  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { PersonComponent } from './person/person.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    PersonComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Upvotes: 0

Views: 285

Answers (2)

Ali Shahzad
Ali Shahzad

Reputation: 5332

There's a mistake in your view, change Person to person:

<app-person [person]="person"></app-person>

Also you don't need to add multiple properties in your component. You can directly use the input property. Change your component to this:

import { Component, OnInit, Input } from '@angular/core';
import { Person } from './person.model';

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

  @Input() person: Person;

  constructor() { }

  ngOnInit() { }
}

Upvotes: 1

Amit Chigadani
Amit Chigadani

Reputation: 29715

Simple mistake. Person should be person. Variables are case sensitive.

<app-person [person]="person"></app-person>

Your working code is here

Upvotes: 1

Related Questions