Angular エラー「Can't bind to 'ngModel' since it isn't a known property of 'input'」の解決方法

Angular エラー「Can't bind to 'ngModel' since it isn't a known property of 'input'」解説

このエラーは、Angular テンプレートで ngModel ディレクティブを input 要素にバインドしようとした際に発生します。これは、ngModel が input 要素の既知のプロパティではないためです。

原因

このエラーの主な原因は以下の2つです。

解決方法

このエラーを解決するには、以下の方法を試してください。

ngModel ディレクティブの使用方法を確認する

ngModel ディレクティブが正しく使用されていることを確認してください。input 要素以外に使用している場合は、ngModel ディレクティブの属性名に接頭辞 formControl を付けてください。

input 要素の属性が正しく設定されていることを確認してください。特に、type 属性、name 属性、value 属性が正しく設定されていることを確認してください。

コード例

以下のコード例は、ngModel ディレクティブを input 要素と select 要素に正しく使用している例です。

<input type="text" [(ngModel)]="name" />
<select [(ngModel)]="selectedCountry">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
</select>

補足

• このエラーは、Angular バージョン 2 以降で発生します。
• ngModel ディレクティブは、フォームコントロール要素の値をデータモデルとバインドするために使用されます。

関連用語

• Angular
• TypeScript
• Angular-ngmodel
• ngModel
• input
• formControl
• エラー
• バインド
• データモデル

謝辞

この回答は、以下の情報に基づいて作成されました。

免責事項

この回答は情報提供のみを目的としており、専門的なアドバイスとして解釈されるべきではありません。

HTML

<div class="container">
  <h1>Angular エラー「Can't bind to 'ngModel' since it isn't a known property of 'input'」</h1>
  <form (ngSubmit)="onSubmit()">
    <label for="name">名前:</label>
    <input type="text" id="name" [(ngModel)]="name" />
    <br />
    <label for="country">国:</label>
    <select id="country" [(ngModel)]="selectedCountry">
      <option value="jp">日本</option>
      <option value="us">アメリカ</option>
    </select>
    <br />
    <button type="submit">送信</button>
  </form>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent {
  name = '山田太郎';
  selectedCountry = 'jp';

  onSubmit() {
    console.log('送信されました');
  }
}

• input 要素の場合、[(ngModel)] ディレクティブを使用して、コンポーネントの name プロパティと input 要素の値を双方向にバインドしています。

このコードを実行すると、以下の画面が表示されます。

フォーム送信

送信 ボタンをクリックすると、onSubmit() メソッドが呼び出されます。このメソッドでは、コンソールに「送信されました」というメッセージが表示されます。

注意事項

このコード例は、ngModel ディレクティブを input 要素と select 要素に正しく使用している例です。しかし、実際のアプリケーションでは、要件に応じてコードを変更する必要があります。

Angular エラー「Can't bind to 'ngModel' since it isn't a known property of 'input'」の解決方法

<input type="text" [(ngModel)]="name" />
<select [(ngModel)]="selectedCountry">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
</select>

その他の解決方法

上記の方法で解決できない場合は、以下の方法を試してください。

• FormsModule をインポートする

ngModel ディレクティブを使用するには、FormsModule をモジュールにインポートする必要があります。

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

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

• ngModel ディレクティブの代わりに [(ngModel)] を使用する