ngModelがフォームの入力を読み込まないのはなぜですか？ （Angular 2/4）

Question

私は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の0でありますすべてのコードを表示したい場合はを入力してください。

Answer 1

まず

あなたは[(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> 

OR

From Component Side：

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

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