title: Data Binding with [ngModel] not working Angular 6
body: <p>I just created an empty <code>Angular</code> project on <code>IntelliJ</code>, I'm trying to bind a textbox to an object's member. My object stays <code>undefined</code> or whatever I assign to it inside <code>OnInit</code>. I included <code>FormsModule</code> in the <code>app.module.ts</code> and I can't get it to work.
  This is my <code>app.component.html</code> file:</p>
  
  <pre><code>&lt;form #form="ngForm"&gt;
      &lt;input type="text" name="name" id="name" [ngModel]="person.name"&gt;
      &lt;button (click)="save()"&gt;save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is <code>app.component.ts</code>:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  import {IPerson, Person} from './model/person.model';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
    title = 'my-app';
    names?: string;
    person?: IPerson;
  
    save() {
      console.log('::::::' + this.person.name);
    }
  
    ngOnInit(): void {
     this.person = new Person();
    }
  }
  </code></pre>
  
  <p><code>app.module.ts</code>:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  import {FormsModule} from "@angular/forms";
  
  @NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>and this is <code>person.model.ts</code>:</p>
  
  <pre><code>export interface IPerson {
    name?: string;
  }
  
  export class Person implements IPerson {
    constructor(
      public name?: string
    ) {
    }
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>