技術情報ブログ
Angular
2021.07.28

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

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でのフロントエンド開発を担当しております。

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

【2023年11月更新】Power Apps の実践的なノウハウ まとめ

2023.11.01

Power Automate×SharePoint:SharePoint上からPower Automateを実行する方法

2023.10.18

SharePoint:新着からX日間書式設定を変更する方法

2023.10.04

【Power Automate】concat関数の文字数制限の境界値でエラーを発生させてみた

2023.09.20

【小ネタ】Power Apps:知らなきゃ損!? 便利なショートカットキーの紹介

モデル駆動型アプリPower AppsPower PlatformSharePointExcelPower AutomateC#attributevalidationローコードAngularAccessInfoPathMatTableAngular Materialデータ構造SortByColumns関数TypeScriptHTMLEF CoreマイグレーションFramework CoreAttribute directivesO/Rマッパーazure sql databaseCase式HTTP RequestCSSxUnit.Net Core 3.1VSCode.Net Core Test ExplorerDataverse for Teamsitem関数Google MapsMarker ClustererRANK()関数Dynamics 365 SalesMicrosoft TranslatorマーカークラスタリングライブラリtailwindcssマルチテナントドロップダウンメニューBreakpointObserverメディアクエリスマホPCレスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術ItDX情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行
PageTop
ページトップに戻る