angular遇到的坑 Can't bind to 'ngModel' since it isn't a known property of 'input'

当我在input标签里使用[(ngModule)]时

<input [(ngModel)]="key" class="form-control" placeholder="搜索..." (change)="showModal()">

出现一个坑，提示

Can't bind to 'ngModel' since it isn't a known property of 'input'

解决方法 在module中新增代码段

import { NgModule } from '@angular/core';
import {BootstrapModalModule} from '../components/bootstrap-modal/bootstrap-modal.module';
import { FormsModule } from '@angular/forms'; // 新增代码段

@NgModule({
  declarations: [...COMPONENTS],
  imports: [
    BootstrapModalModule,
    FormsModule // 新增代码段
  ],
  exports: [...COMPONENTS],
  entryComponents: []
})
export class LayoutModule { }

新增代码后 出现新的错误

这是因为Ng input标签没加name属性

<input name="key" [(ngModel)]="key" class="form-control" placeholder="搜索..." (change)="showModal()">

加上以上代码后就能成功编译了