[解決済み] Angularです。exportAs "が "ngForm "に設定されたディレクティブはエラーになる

質問

FormsModule と NgForm モジュールをインポートし、FormsModule を imports 配列に追加してみたのですが、FormsModule のインポートがうまくいきません。

以下は私のコードです。

//our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule, NgForm} from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
  <form #searchForm="ngForm">
  <input type="text" required [(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>


  </form>

  `,
  styles: [`
  .error {
    color: red;
    font-size: 11px;
  }
  `]
})
export class App {
  public model = {
    search: "" 
  }

  constructor() {

  }
}

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [App],
  bootstrap: [App],
})
export class AppModule {}

そして、以下はエラーのプリントアウトです。

runtime.9ff156e16d788666a54a.js:16 Error: テンプレートパースエラーです。 exportAs" が "ngForm" に設定されているディレクティブはありません。 (" ]#searchForm="ngForm"> ]#inputSearch="ngForm"> この入力が必要です。

"）。 ng:///AppModule/App.html@2:76 'ngModel'にバインドできないのは、'ngModel'が input' の既知のプロパティです。(" ][(ngModel)]="model.search" ngControl="search" #inputSearch="ngForm"> https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js Loading https://run.plnkr.co/rhpwnL6UIQwCFOKZ/src/main.js f @ runtime.9ff156e16d788666a54a.js:16

どのように解決するのですか？

この行が原因でエラーが発生しました。

#inputSearch="ngForm"

これは正しい行です。

#inputSearch="ngModel"

以下は動作例です。form タグ内で ngModel を使用する場合、 "name" 属性の値も提供する必要があります。

  <form #searchForm="ngForm">
  <input type="text" required name="search" [(ngModel)]="model.search"  #inputSearch="ngModel">
  <p class="error" [hidden]="inputSearch.valid"> This input is required</p>
  </form>