Привязка данных с [ngModel] не работает Angular 6

Question

Я только что создал пустой Angular проект на IntelliJ, я пытаюсь привязать текстовое поле к члену объекта.Мой объект остается undefined или что-то, что я назначаю ему внутри OnInit.Я включил FormsModule в app.module.ts и не могу заставить его работать.Это мой app.component.html файл:

<form #form="ngForm">
    <input type="text" name="name" id="name" [ngModel]="person.name">
    <button (click)="save()">save</button>
</form>

Это app.component.ts:

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();
  }
}

app.module.ts:

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 { }

и это person.model.ts:

export interface IPerson {
  name?: string;
}

export class Person implements IPerson {
  constructor(
    public name?: string
  ) {
  }
}

Что я делаю не так?

Answer 1

привязка вашей ng-модели должна быть двусторонней, например: (обратите внимание на дополнительные скобки)

<input type="text" name="name" id="name" [(ngModel)]="person.name">

Answer 2

вы можете исправить код app.component.html следующим образом

<form #form="ngForm">
    <input type="text" name="name" id="name" [(ngModel)]="person.name">
    <button (click)="save()">save</button>
</form>

Answer 3

Вы можете посмотреть здесь: https://angular.io/api/forms/NgModel

в вашем случае вы можете исправить код app.component.html следующим образом:

<form #form="ngForm">
    <input type="text" name="name" id="name" [(ngModel)]="person.name">
    <button (click)="save()">save</button>
</form>