フォームの概要

フォームは、多くのアプリケーションで重要な役割を果たします。なぜなら、フォームによってアプリケーションはユーザーからの入力を取得できるようになるからです。Angularにおけるフォームの処理方法について学びましょう。

Angularには、テンプレート駆動型フォームとリアクティブフォームの2つのタイプのフォームがあります。次のいくつかの活動で、両方のフォームについて学びます。

この活動では、テンプレート駆動型アプローチを使用してフォームを設定する方法を学びます。

1. 入力フィールドの作成

   user.component.tsで、idがframeworkに設定され、typeがtextに設定されたテキスト入力を使用してテンプレートを更新します。

         
   <label for="framework">  好きなフレームワーク:  <input id="framework" type="text" /></label>
       

2. FormsModuleのインポート

   このフォームでフォームにデータバインディングを可能にするAngularの機能を使用するには、FormsModuleをインポートする必要があります。

   @angular/formsからFormsModuleをインポートし、UserComponentのimports配列に追加します。

         
   import {Component} from '@angular/core';import {FormsModule} from '@angular/forms';@Component({  ...  standalone: true,  imports:[FormsModule],})export class UserComponent {}
       

3. 入力の値へのバインディングの追加

   FormsModuleには、ngModelと呼ばれるディレクティブがあり、このディレクティブは入力の値をクラスのプロパティにバインドします。

   入力でngModelディレクティブを使用するように更新します。具体的には、[(ngModel)]="favoriteFramework"という構文を使用して、favoriteFrameworkプロパティにバインドします。

         
   <label for="framework">  好きなフレームワーク:  <input id="framework" type="text" [(ngModel)]="favoriteFramework" /></label>
       

   変更を加えたら、入力フィールドに値を入力してみてください。画面上でどのように更新されるかを確認してください（はい、非常にクールです）。

   注: [()]という構文は、「バナナインボックス」として知られていますが、プロパティバインディングとイベントバインディングの2つのバインディングを表します。Angularのドキュメントの双方向データバインディングの詳細については、こちらをご覧ください。

これで、Angularでフォームを構築するための重要な最初のステップを踏み出しました。

素晴らしいですね。勢いを維持しましょう！