【Angular】ngFormを使ってフォームをまとめて処理する

2021年12月11日

FormsModuleのngModelという機能を使ってフォームの値をリアルタイムで処理していく方法について以前記事を書きましたが(こちら)、
それだとフォームの値1つ1つに関して、入力値を入れる変数を用意して、処理を書いていってということが必要になり、よくある入力フォームが10個20個ある画面を作りますとなったときに大変面倒なことになります。
今回は、ngFormを使って、フォームをまとめて処理していく方法を紹介していきます。

スポンサーリンク

FormsModuleをインポート

ngFormを使うにあたって、やはりFormsModuleをインポートする必要があります。
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を追加してください。

入力フォームをまとめて処理する

コンポーネントのHTMLを例えば以下のように修正します。

<p>ringo works!</p>
<p>入力された項目をJSONで表示すると:{{inputText}}</p>
<form #forms="ngForm" (ngSubmit)="onClick(forms.value)">
    <p>林檎</p>
    <input type="text" name="ringo" ngModel>
    <p>梨</p>
    <input type="text" name="nashi" ngModel>
    <p>蜜柑</p>
    <input type="text" name="mikan" ngModel><br>
    <input type="submit" value="click">
</form>

まずngFormを使うにあたって<form>タグに「#○○(任意のID)="ngForm"」と追記します。
次に<form>タグ内の<input>タグにngModelを追記します。
これで○○で<form>タグ内の入力フィールドの入力値をまとめることができます。

次にtsファイルの方にonClickメソッドを定義していきます。

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 {
  }

  onClick(value: any){
    this.inputText = JSON.stringify(value);
  }

}

onClickメソッドを実行することによって、入力フィールドの入力値をまとめたオブジェクトをJSON形式のテキストに変換し、
この変換したテキストを画面に表示するという流れになります。

では、これで画面を表示してみるとこのようになります。

この入力フィールドに適当な文字を書いて、ボタンをクリックすると以下のようになります。

このように、各入力フィールドのname=○○で設定していた項目名に対して、入力フィールドの入力値が入っています。
これを応用することで、例えば10個くらい入力フィールドがある画面を作って、ボタンを押下すると入力値をDBに保存したり、APIに送信したりする画面を作る場合とかに、コードを書くのがとても楽でわかりやすくすることが出来ます。

終わりに

今回はngFormで入力値をまとめて処理する方法を紹介しましたが、他にもFormBuilderというものを使ったりする方法などもあるようです。
ここで紹介した方法で上手くいかなかったときは、そちらも考慮に入れてみてください。

スポンサーリンク

Angular開発

Posted by 社畜林檎