技術情報ブログ
Angular
2021.07.28

Angular で属性ディレクティブを用いた、整数のみの入力フォーム作成

こんにちは。アーティサン株式会社の木戸です。

 

本記事では Angular で属性ディレクティブを用いた、整数のみの入力フォーム作成手法をご紹介します。

Angular で年齢等、整数のみの入力フォームを作成したい、という方に向けた記事です。

 

Angular で整数のみの入力フォームを実現する場合、関数を作成しinput 要素のイベントに紐付ける、もしくは、属性ディレクティブを作成しinput 要素の属性として記述するという 2 つの手法があります。

 

  1. 関数を作成しinput 要素のイベントに紐付ける

    関数を作成しinput 要素のイベントに紐付ける手法では、利用する各コンポーネント毎に、関数のインポートとメンバ変数への代入が必要になり、余計なメンバ変数の作成やソースコードが煩雑になります。

  2.  

  3. 属性ディレクティブを作成しinput 要素の属性として記述

    これに対して、属性ディレクティブを用いた手法ならば、属性ディレクティブを作成後、input 要素の属性として宣言的な記述のみで利用できるため、余計なメンバ変数の代入がなくソースコードもスッキリさせる事ができます。

 

 

属性ディレクティブとは

属性ディレクティブとは、HTML 要素に属性として記述する事によって、DOM 要素と Angular コンポーネント外観や動作を変更できるクラスです。

 

環境

  • Angular: 12.0.3
  • Angular CLI: 12.0.3
  • TypeScript: 4.2.3

 

実装方針

  1. 属性ディレクティブの作成
  2. 属性ディレクティブに、input イベントを受け取る関数を追加
  3. input 要素に属性ディレクティブを追加

 

実装

$ ng generate directive integerOnly

 

属性ディレクティブに、input イベントを受け取る関数を追加(.ts)

input イベントを受け取る関数を追加し、整数以外の入力値を削除する(10-13 行)

// integer-only.directive.ts
import { Directive, ElementRef, HostListener } from "@angular/core";

@Directive({
  selector: "[appIntegerOnly]",
})
export class IntegerOnlyDirective {
  constructor(private elemRef: ElementRef<HTMLInputElement>) {}

  @HostListener("input") onInput(): void {
    const initialValue = this.elemRef.nativeElement.value;
    this.elemRef.nativeElement.value = initialValue.replace(/[^0-9]*/g, "");
  }
}

 

input 要素に属性ディレクティブを追加(.html)

input 要素に属性ディレクティブを追加

<input type="text" appIntegerOnly />

 

関数をイベントに紐付ける手法と、属性ディレクティブを用いた手法の比較

ここで、関数をイベントに紐付ける手法と、属性ディレクティブを用いた手法のコードを比較してみましょう。

関数をイベントに紐付ける手法と比べ、属性ディレクティブを用いた手法では余計なメンバ変数の代入がなく、かつ宣言的に記述できるためコードがスッキリします。

 

関数をイベントに紐付ける場合

  1. 入力値を整数のみにする関数を import
  2. import した関数をメンバ変数に代入
  3. input 要素の(input)イベントに関数を代入
import { Component } from "@angular/core";
import { onInput } from "./number-only";

@Component({
  selector: "app-integer-directive",
  templateUrl: "./integer-directive.component.html",
  styleUrls: ["./integer-directive.component.scss"],
})
export class IntegerDirectiveComponent {
  public onInput = onInput;
}
<input (input)="onInput($event)" type="text" />

 

属性ディレクティブを用いた場合

属性ディレクティブを作成し、input 要素に属性を追加

<input type="text" appIntegerOnly />

 

あとがき

本記事では、属性ディレクティブを用いて整数のみの入力フォームを作成しました。

なお、属性ディレクティブにメンバ変数を追加し、input 要素から属性を通して値を渡す事によって動作をカスタマイズする事も可能です。

 

関連リンク

にTypeScriptでのフロントエンド開発を担当:木戸裕貴

木戸裕貴

私は主にTypeScriptでのフロントエンド開発を担当しております。

シェアする
記事カテゴリ
最新記事
 
2022.05.18

Power Automateのベストプラクティス・アンチパターン(4)【アクションの入れ子を回避】

 
2022.05.11

Power Automate:メール送信時にメッセージIDを取得する方法

 
2022.04.27

Power Apps の実践的なノウハウ まとめ

人気記事ランキング
1
2020.10.02

世界に広がる Power Apps「モデル駆動型アプリ」のココがスゴイ!【第1回】

2
2021.07.14

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第2回】フロー作成でエラー発生!

3
2021.06.23

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第1回】4つのシーンごとに手法を比較、その最適解とは?

4
2021.09.03

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第8回】トリガーの条件の指定方法

5
2021.08.11

【Power AutomateでExcelデータをSharePointにインポートするために考えること 第5回】ExcelファイルIDを動的取得

   
PageTop
ページトップに戻る