Angularで「NG8002: Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input’.」
今回はAngularを触っているときに「NG8002: Can’t bind to 'ngModel’ since it isn’t a known property of 'input’.」というエラーが起きたときの原因と対処法についてご紹介していきます。
Angularのバージョンは18.0.0です。
Angularで「NG8002: Can’t bind to 'ngModel’ since it isn’t a known property of 'input’.」
Angularで
|
1 |
<input type="text" [(ngModel)]="message" /> |
のようにngModelを使って双方向データバインディングを行おうとしたときに表題のエラーが発生しました。
結論としては、[(ngModel)]のような双方向データバインディングの記法を使用するときはFormsModuleをインポートしなければなりません。
例えば、app.module.tsにFormsModuleをインポートするときは次のようになるでしょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; // 追加 import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, FormsModule // 追加 ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
FormsModuleをインポートすれば正常に双方向データバインディングが動作していることが確認できると思います。
終わりに
今回はAngularを触っているときに「NG8002: Can’t bind to 'ngModel’ since it isn’t a known property of 'input’.」というエラーが起きたときの原因と対処法についてご紹介いたしました。