【Angular】FomsModuleの追加方法に関して

Question

実現したいこと

数日前からAngularの勉強を始めました。
Angularにて、FormsModuleを追加してフォームを使いたいです。

発生している問題・分からないこと

HelloComponent.htmlに

<input type="text" [(ngModel)]="text1" />

を実装したところ、以下のようなエラーが出ています。

エラーメッセージ

Can't bind to 'ngModel' since it isn't a known property of 'input'.ngtsc(-998002)
hello.component.ts(12, 21): Error occurs in the template of component HelloComponent.

該当のソースコード

<div id="body">
  <h1>{{title}}</h1>
  <p>{{message}}</p>
  <p>TYPE: {{text1}}</p>
  <input type="text" [(ngModel)]="text1" />
</div>

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { HelloComponent } from './app/hello/hello.component';
import { FormsModule } from '@angular/forms';

bootstrapApplication(HelloComponent, appConfig)
  .catch((err) => console.error(err));

import { NgClass, NgFor, NgIf } from '@angular/common';
import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [NgFor,NgIf, NgClass],
  templateUrl: './hello.component.html',
  styleUrl: './hello.component.css'
})

export class HelloComponent {
  title:string = "";
  message:string = "";
  text1:string = "";

  ngOnInit() {
    this.title = "Hello-app!";
    this.message = "ngModel1を使う";
    this.text1 = "";
  }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

「Angular 超入門（掌田津耶乃, 秀和システム）」という参考書を元にFomsModuleを使おうとしているのですが、参考書のバージョンが古く、私の方には「app.module.ts」がないため、追加方法がわかりませんでした。
試行錯誤してみましたが、エラーを解消できないため、ご教授願います。

補足

Angularのバージョン：v17.3.0

Answer 1

v17のドキュメントを探すのが大変かもしれませんが、次のリンク先にv17のテンプレート駆動フォーム(FormsModule)でのセットアップが記載されていました。

Angular - Angularのフォームのイントロダクション

それによるとhello.component.tsは次のようになるかなと思います。
(// ←←← のようなコメントが変更点です。)
＊hello.component.tsの変更によってmain.tsのFormsModuleのimportは不要ですね。

// hello.component.ts
import { NgClass, NgFor, NgIf } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms'; // ←←← 追加 ←←←

@Component({
  selector: 'app-hello',
  standalone: true,
  imports: [NgFor,NgIf, NgClass, FormsModule], // ←←← FormsModuleを追加 ←←←
  templateUrl: './hello.component.html',
  styleUrl: './hello.component.css'
})

export class HelloComponent {
  title:string = "";
  message:string = "";
  text1:string = "";

  ngOnInit() {
    this.title = "Hello-app!";
    this.message = "ngModel1を使う";
    this.text1 = "";
  }
}

Comments

[maya_u]

ご回答ありがとうございます。
エラーが解消され、上手く実装できました。