【Angular】FormsModuleを使ったフォーム作成

2021年12月11日

普通にHTML、Javascriptを使って画面を作っていくときも入力フィールド、プルダウン、チェックボックス、ボタンなどのフォームを作成しますが、
Angularで開発を行う際は、FormsModuleというフォーム用のモジュールが用意されています。
これを使うとかなり楽に実装できるので、今回はこれについて紹介していきます。

スポンサーリンク

FormsModuleのインポート

まず、FormsModuleをインポートして使えるようにする必要があります。
Angularでモジュールについて定義しているapp.module.tsで以下のように追記していきます

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { RingoComponent } from './ringo/ringo.component';

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

インポート文「import { FormsModule } from '@angular/forms’;」を追記し、
NgModuleデコレータのimportsにFormsModuleを追加します。
これでAppModuleに含まれるコンポーネントにおいてFormsModuleが使えるようになりました。

入力フィールドの場合

例えば、FormsModuleにあるngModelという機能を使って入力フィールドを作ってみます。
コンポーネントのhtmlファイルを以下のように修正します。

<p>ringo works!</p>
<p>入力されたテキスト:{{inputText}}</p>
<input type="text" [(ngModel)]="inputText" />

<input type="text">にngModelを追記します。
これは要するに、この入力フィールド内の値が変化すると、inputTextに入力フィールドの値が入力されるということです。
つまりこの場合、入力フィールドにテキストを入力すると、その内容が「 入力されたテキスト: 」の右の部分にリアルタイムで表示されていくことになります。

次にtsファイルの方も以下のように修正します。

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

@Component({
  selector: 'app-ringo',
  templateUrl: './ringo.component.html',
  styleUrls: ['./ringo.component.css']
})
export class RingoComponent implements OnInit {
  inputText:String;

  constructor() {
    this.inputText = "";
  }

  ngOnInit(): void {
  }

}

ここでは、HTMLの方でも使っていたinputTextという変数をコンポーネントのクラス内に定義していきます。
これをやらないとHTMLの方で「いきなり出てきたinputTextって何?」ということになるのでエラーとなります。

この画面を表示するとこのようになります。

ここの入力フィールドにテキストを入力するとこうなります。

静止画像では分かりにくいですが、入力内容に沿ってリアルタイムで表示が変わります。

プルダウンの場合

入力フォームの場合とほぼ同じ感じで、他のフォームでも入力値を変数にリアルタイムで入力することができます。
プルダウンで同じようなことをやりたい場合、

<p>ringo works!</p>
<p>選択された項目:{{inputText}}</p>
<select [(ngModel)]="inputText">
    <option>林檎</option>
    <option>バナナ</option>
    <option>蜜柑</option>
</select>

例えばこんな感じでHTMLを編集すると、画面はこのように表示されます。

ここでプルダウンから一つ選択すると、

このように、選択した値がリアルタイムで反映されます。

終わりに

FormsModuleを使ったフォーム処理について紹介しました。
これと同じように作ることで、ラジオボタンでもチェックボックスでも似たようなことができますので、良ければ参考にしてみてください。

スポンサーリンク

Angular開発

Posted by 社畜林檎