Angular 形式的 ngModel答案

【问题标题】：ngModel in Angular FormAngular 形式的 ngModel
【发布时间】：2018-12-13 20:06:26
【问题描述】：

我正在尝试从 TS 文件中的表单访问数据。我收到错误：RROR TypeError: Cannot read property 'name' of undefined

我的代码是这样的：

import { Component, OnInit } from '@angular/core';
import { employee } from '../models/Employee';
import { NgForm } from '@angular/forms'; 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

  data: employee;

  constructor() { }

  ngOnInit() {
  }

  onSubmit(form:NgForm ) { 
    alert("Hello "  + JSON.stringify(this.data));
  }
}

<div class="container"> 
    <form #form="ngForm" (ngSubmit)="onSubmit(form)">
      <div class="form-group">
        <label for="form">name</label>
        <input type="text" class="form-control" id="name"  [(ngModel)]="data.name" required>
      </div>

      </div>
      <button type="submit" class="btn btn-success" >Submit</button>
    </form>
</div>

我没有发现我的错误，有什么想法吗？

谢谢

【问题讨论】：

“数据”包含什么？
开头是空的。我想将输入传递给“数据”
请查看更新后的答案

标签： html angular angular-ngmodel

【解决方案1】：

使用安全导航操作符进行模板绑定。这样，如果未定义“数据”，您的代码将不会尝试从中读取 prop name。

<input type="text" class="form-control" id="name"  [(ngModel)]="data?.name" required>

如果属性 data 未定义，并且您想使用 data 作为容器来存储表单值，那么您至少必须创建一个空对象，例如，将数据初始化为 data = {}它将即时创建密钥。

【讨论】：

嗨，数据是“员工”类型。 “员工”上有“姓名”
问题是时间问题之一。在从数据源获取数据之前，您的表单可能会尝试显示data（或employee）。所以代码会生成一个can't read property 错误。然后，我们确实获取了数据，您的表单将更新。试试上面的建议吧。

【解决方案2】：

解决方案是永远不要将数据设为空。并将数据初始化为

 data = {} as employee;

【讨论】：