【Angular】公式チュートリアルの理解５ (ユーザー入力フォーム)

はじめに

前記事で外部からデータを持ってくるための、HttpClientの設定方法を学んだ。

本セクションではFormBuilderを用いてフォームを作成し、そこに入力した内容をコンソールで確認する。そのためここでは入力フォームの扱い方を新しく学ぶ。

ユーザー入力にフォームを使う

今回はカート内容の画面に購入者の名前と住所を入力できるようにする。

チェックアウトフォームモデルを定義する

フォームを設定する上で、新たにFormBuiderをimportする。こういうサービスがあるという理解で十分であり、これ以降で使い方を知っていけば良い。
ReactiveFormsModuleの一部とのことで、これはつまりHttpClientのようにapp.module.tsでFormBuilderを追記する必要はなく、ReactiveFormsModuleがNgModuleのimportに追記されていれば使うことができる。
以下にソースコードを一気に列挙し、コメントで解説を行う。

src/app/cart/cart.component.ts

import { Component } from '@angular/core';
//FormBuilderをimportする(こういう固定文だと理解しておく)
import { FormBuilder } from '@angular/forms';
import { CartService } from '../cart.service';

@Component({
  selector: 'app-cart',
  templateUrl: './cart.component.html',
  styleUrls: ['./cart.component.css']
})
export class CartComponent {

  items = this.cartService.getItems();
    //FormBuilderのgroupメソッドを用いる。このメソッドを用いてcheckoutFormというプロパティを定義する
    //この中身のnameとaddressは入力を受け取る部分である。
  checkoutForm = this.formBuilder.group({
    name: '',
    address: ''
  });
   
  constructor(
    private cartService: CartService,
     //FormBuilderを用いるためにこれまで通りDIする。　
    private formBuilder: FormBuilder,
  ) {}
    //フォームを処理するためのメソッドを定義する
  onSubmit(): void {
    // Process checkout data here
    //　このメソッドが実行されたらまずカートの中身を空にする
    this.items = this.cartService.clearCart();
    // 入力内容と下記文言を含む警告を表示する
    console.warn('Your order has been submitted', this.checkoutForm.value);
    //入力したフォーム内容をクリアするというコード
    this.checkoutForm.reset();
  }
}

チェックアウトフォームを作成する

上記で作成したメソッドを実行するよう設定する。
下記コードを追記することで<form>要素とPurchaseボタンを追加する。
formタグを確認するとformGroupという名で先程定義したcheckoutFormをプロパティバインディングしている事がわかる。

src/app/cart/cart.component.html

<!-- このプロパティバインディングに注目-->
<form [formGroup]="checkoutForm">
  <button class="button" type="submit">Purchase</button>
</form>

続いて、formタグでngSubmitのイベントバインディングを使用できるよう追記する。ngSubmitディレクティブはフォーム入力内容送信し、onSubmit(）メソッドを実行するという意味である。

src/app/cart/cart.component.html (cart component template detail)

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
  <button class="button" type="submit">Purchase</button>
</form>

以上を追記すると下記のようなソースコードになる。
入力した内容はFormControlNameという要素でformGroup内で定義された（ここではcheckoutForm）name、addressと紐付けられる。
ここではこういう書き方をすることで入力内容が変数に格納されるということが理解できたら十分である。

src/app/cart/cart.component.html

<h3>Cart</h3>
<p>
  <a routerLink="/shipping">Shipping Prices</a>
</p>

<div class="cart-item" *ngFor="let item of items">
  <span>{{ item.name }} </span>
  <span>{{ item.price | currency }}</span>
</div>

<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">
      Name
    </label>
    <input id="name" type="text" formControlName="name">
  </div>

  <div>
    <label for="address">
      Address
    </label>
    <input id="address" type="text" formControlName="address">
  </div>
  <button class="button" type="submit">Purchase</button>
</form>

実際にNAMEとADDRESSのフォームに入力後、Purchaseボタンを押したら、ブラウザの開発者ツールのconsoleを確認する。入力したものがconsoleに表示されれば動作確認としては完了である。Angularではconsole.logが出力される場所は実行したターミナルではなく、表示しているブラウザのconsoleに出てくることに注意する。

おわりに

Angular公式チュートリアルの5としてユーザー入力フォームセクションを終了した。今回も引き続きFormBuilderの使い方の全体像がなんとなく理解できれば良いと思う。これまで以上に新しい単語や書き方が出てきたが、入力フォームの作り方、そして入力した内容をどのようにして紐付け、利用するかの実際の流れが理解できれば十分だと思う。ここまで大方理解ができれば個人で調べるなどして理解を深めることができる段階にいるのではないかと思う。

下記リンクより、次は最後のチュートリアルを進めていく。
次→【Angular】公式チュートリアルの理解6 (デプロイ)