时间戳

首页 > 解决方案 > After creating form then submit it shows Cannot read property 'name' of undefined in Angular 6

angular - After creating form then submit it shows Cannot read property 'name' of undefined in Angular 6

问题描述

createemployee.component.html

<form #employeeForm="ngForm" (ngSubmit)="onSaveEmp(employeeForm)" >
<div class="panel-body">
      <div class="form-group">
        <label for="name">Name</label>
        <input type="text" placeholder="Enter Name" class="form-control" 
        name="name" ngModel required
        #fname="ngModel"
        >
</div>
<div class="panel-footer">
      <button  type="submit" class="btn btn-primary" 
      [disabled]="!employeeForm.valid" (click)="saveEmployee()"
      >Save</button>
    </div>
</div>
</form>

createemployee.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { NgForm } from '@angular/forms'; 

import { Employee } from '../employee.model';
import { EmployeeService } from '../employee.service';
import { Router } from '../../../../node_modules/@angular/router';




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

  @Input() employee: Employee;


    photoPreview = false;

  constructor(private empService: EmployeeService,
              private router: Router
  ) { }

  ngOnInit() {

  }

  onSaveEmp(empForm: NgForm) {
    //console.log(empForm.value);
  }

  saveEmployee(employee: Employee) {
    this.empService.save(employee);
    'The Array of Form' + console.log(employee);
  }

  onShowPreview() {
    this.photoPreview = !this.photoPreview;
  }
}

employee.service.ts

import { Injectable, OnInit } from "@angular/core";

import { Employee } from "./employee.model";

@Injectable({
  providedIn: 'root',
})

export class EmployeeService implements OnInit {

    private employees: Employee[] = [
        new Employee('John', 'Male', 'john@gmail.com', 1234567890, 'Phone', new Date('06/10/1991'),'IT', true, 'assets/images/male.png'),
        new Employee('sunria', 'Female', 'sunria@gmail.com', 9876543211, 'Phone', new Date('06/30/1991'),'HR', true, 'assets/images/female.png'),
        new Employee('Sandy', 'Female', 'sandy@gmail.com', 12344509876, 'Phone', new Date('02/28/2002'),'Manager', true, 'assets/images/female2.png')
    ]

    constructor() {

    }

    ngOnInit() {}

    getEmployees() {
        return this.employees.slice();
    }

    save(employee: Employee) {
        this.employees.push(employee);
    }

}

employee.component.html

<div class="panel panel-primary" *ngFor="let employee of employees"

>
    <div class="panel-heading">
        <div class="panel-title">
            <h4>{{ employee.name }}</h4>
        </div>
    </div>
</div>

I have normal createemployee.component.html form after I submitted the form in employees array show empty creation didn't add in employees[]. Empty details will be added in employees array. How can I achieve this problem it's like CRUD while creating new employee I got an error like this.

ERROR TypeError: Cannot read property 'name' of undefined

and create an undefined array.

标签： angular

解决方案

您需要使用安全导航运算符?， 

<div class="panel-heading">
        <div class="panel-title">
            <h4>{{ employee?.name }}</h4>
        </div>
</div>

推荐阅读