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

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

Power Automateのベストプラクティス・アンチパターン(6)【Power Automate上でExcelファイルを編集する際の注意点】

2024.06.26

一歩先へ進む企業のためのPower Platform内製化マニュアル:Power Apps・Power Automateの内製化に必要なリンク一覧

2024.06.05

【2024年6月更新】Power Automate 設計・構築時のTips集

2024.05.15

非エンジニア【(元)自治体職員】がローコード開発をして気が付いたこと コーディング規約とPower Platformプレミアムサンプルアプリ集

2024.05.01

Power Apps・Power Automateの勉強方法(2)

モデル駆動型アプリ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レスポンシブ入門初心者中級者キャンバスアプリDatePickerDropdownviewビューアクセス制限承認リマインドSetForAllUpdateContextロードマップ技術It情報技術メッセージIDメールfirst()関数nest入れ子動的リストcollectionコレクション複数の添付ファイル承認フローformエクスポートインポートカスタマイズcomponentダイアログコンポーネントdialogTips新機能変数検索Microsoft 365グループセキュリティグループ送信元メールの送信差出人インスタントクラウドフロー自動化したクラウドフロー委任VBAエラーエクセルerror復元restorePower BI個人列ユーザー列SharePoint Onlineリスト非表示アプリ[市民開発者構築自動化したクラウド フローフローの種類インスタント クラウド フロースケジュール済みクラウド フローレスポンシブ レイアウトresponsive layoutデータ行の制限引き継ぎ退職所有者を変更異動LoopMicrosoftdesignJSONデザインtemplateテンプレート運用選択肢列参照列ChatGPTOpenAIオープンAIチャットGPTgalleryギャラリースクロールコンテナショートカットキーshortcut keyconcat関数文字制限フロー実行開発環境環境本番環境ライセンス環境構築手順pipelineCI/CDパイプラインDevOpsMicrosoft 365簡易在庫管理時間外通知ファイルフィルター クエリドキュメント ライブラリfilter querysortソートmultiple item複数項目シェアポイント便利機能カレンダーCalendarTeamsローコード開発非エンジニア体験談勉強内製化
PageTop
ページトップに戻る