为什么 ngModel 没有读取我的表单输入？（角度 2/4）答案

【问题标题】：Why is ngModel not reading my input for a form? (Angular 2/4)为什么 ngModel 没有读取我的表单输入？（角度 2/4）
【发布时间】：2018-04-20 15:32:24
【问题描述】：

我试图从我的 Angular 表单中获取一些输入。我想在输入时看到输入。我收到此错误：

ContactFormComponent.html:6 ERROR TypeError: Cannot read property 'name' of undefined
    at Object.View_ContactFormComponent_0._co [as updateDirectives] (ContactFormComponent.html:6)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13067)
    at checkAndUpdateView (core.es5.js:12251)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)
    at execComponentViewsAction (core.es5.js:12531)
    at checkAndUpdateView (core.es5.js:12257)
    at callViewAction (core.es5.js:12599)

这是我的表单 html 模板。我将 ngModel 放在我试图通过 {{model.name}} 绑定输入并查看我的输入的表单输入中。：

<div class="contact-wrap">

  <form #contactForm="ngForm" class="contact-form mx-auto">

    <label for="name">Name</label>
    <input type="text" id="name" [(ngModel)]="model.name" name="name"> {{model.name}}
    <label for="email">Email</label>
    <input type="text" id="email">
    <label for="message">Message</label>
    <textarea name="" id="message" cols="30" rows="4"></textarea >
    <input type="submit" class="contact-submit">

  </form>
</div>

这是我的表单组件：

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


@Component({
  selector: 'contact-form',
  templateUrl: './contact-form.component.html',
  styleUrls: ['./contact-form.component.scss']
})
export class ContactFormComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }


}

这是我导入 FormsModule 的 app.module.ts 的一部分：

import { FormsModule } from '@angular/forms';
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule,
    CarouselModule.forRoot(),
    RouterModule.forRoot(appRoutes),
    BrowserAnimationsModule,
    Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
    FormsModule
  ],

另外，如果您想查看所有代码，这里是 github repo。

【问题讨论】：

标签： forms angular

【解决方案1】：

首先

您不能将 undefined 分配给 [(ngModel)]

<input type="text" id="name" [(ngModel)]="model.name" name="name"> {{model.name}} </input>

所以你需要这样做：

<div *ngIf='model?.name'>
    <input type="text" id="name" [(ngModel)]="model.name" name="name"> {{model.name}} </input>
</div>

或

从组件端提供一些初始值，例如：

// From your component
model = { 'name' : '' };

// then your code will work fine
<input type="text" id="name" [(ngModel)]="model.name" name="name"> {{model.name}} </input>

【讨论】：