AngularJs入門「アズ勉。」

アズ勉。AngularJs v1.5.7を、ズブの初心者が、勉強した

  1. HOME
  2. アズ勉。ノート一覧
  3. angularJSのng-pattern/min/maxで正規表現。

angularJSのng-pattern/min/maxで正規表現。

Level 2||2016/08/01

JSの正規表現リテラルを使って、入力される文字列を、指定した文字組み合わせパターンかどうか判定できます。
たとえば、サンプルでも活用している「郵便番号」や「日時」は、予め文字のパターンが決まっています。
郵便番号は、[0~9の3桁]-[0から9の4桁]、
日時は、[年月日時分秒]
というように形式が決まっています。とはいえ、入力するときは、その時の気分や独自のパターンは人それぞれですので、これを統一させること、また処理速度も考えて、正規表現リテラルを使用します。

まずは、全体の動きを確認

実際にサンプルを触ってみたい方はこちら


<form name="myForm" ng-submit="onsubmit()" novalidate>

  <div>
    <label for="zip">郵便番号:</label>
<!-- 入力ボックス -->
    <input id="zip" name="zip" type="text" ng-model="zip"
      ng-pattern="/^[0-9]{3}-[0-9]{4}$/" required />
    <span ng-show="myForm.zip.$error.pattern">
      ハイフン有「123-4567」で入力
  </div>

  <div>
    <label for="now">日時:
<!-- 入力ボックス -->
    <input id="now" name="now" type="datetime-local" ng-model="current"
      min="1990-01-01T00:00:00" max="2050-12-31T23:59:59" required />
  </div>

</form>
            

上記サンプルの「郵便番号」は、先に説明したとおり[0~9の3桁]-[0から9の4桁]のパターン、「日時」については、[年月日時分秒]のパターンでの入力が求められています。日時を入力しようとするとカレンダーが表示されるのは、HTML5のtype属性が「datatime」「datatime-local」の場合に限られます。(この機能は対応ブラウザが限られていますので、ご注意ください。)

「ng-pattern」で正規表現リテラルを使う


  <div>
    <label for="zip">郵便番号:</label>
<!-- 入力ボックス -->
    <input id="zip" name="zip" type="text" ng-model="zip"
      ng-pattern="/^[0-9]{3}-[0-9]{4}$/" required />
    <span ng-show="myForm.zip.$error.pattern">
      ハイフン有「123-4567」で入力
  </div>
            

AngularJSの「ng-pattern」属性は、入力文字のパターンを設定できます。

<input ng-pattern="入力文字のパターン">

郵便番号のパターンは、[0~9の3桁]-[0から9の4桁]です。これを正規表現リテラルにすると、「/^[0-9]{3}-[0-9]{4}$/」になります。

郵便番号の正規表現リテラル

/^
これは、入力の先頭にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/^a/」と記述した場合、入力ボックスに「a」と入力すればマッチしますが、「b」と入力するとマッチしません。
 
$/
これは、入力の末尾にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/a$/」と記述した場合、入力ボックスに「a」と入力すればマッチしますが、「b」と入力するとマッチしません。
 
[0-9]
これは、入力が角括弧で囲まれた文字のどれか1個にマッチしているかどうかという意です。
たとえば、ng-patternの値に「/[0-9]/」と記述した場合、入力ボックスに0から9のいずれかを入力すれば、マッチしますが、「a」と入力するとマッチしません。
 
{3}
これは、入力の直前の文字が 〇 回出現するものにマッチしているかどうかという意です。サンプルで言うと、3回出現したものがマッチします。
たとえば、ng-patternの値に「/[a]{3}/」と記述した場合、入力ボックスに「aaa」と入力すれば、マッチしますが、「abc」と入力するとマッチしません。

正規表現リテラルはこの他にもいろいろありますので、リファレンスなどを参考にしてください。

「min」「max」属性で日時指定


  <div>
    <label for="now">日時:
<!-- 入力ボックス -->
    <input id="now" name="now" type="datetime-local" ng-model="current"
      min="1990-01-01T00:00:00" max="2050-12-31T23:59:59" required />
  </div>
            

AngularJSの「min」属性・「max」属性は、最小値・最大値を設定できます。先に学んだ「ng-minlength」属性「ng-maxlength」属性が「文字数」に対して、「min」属性・「max」属性は「値」を扱う属性です。筆者が混乱未遂だったので、一応・・・・。

<input min="最小値" max="最大値">

サンプルの日時では、minに「1990-01-01T00:00:00」、maxに「2050-12-31T23:59:59」を設定しています。「1990年1月1日00時00分00秒」から「2050年12月31日23時59分59秒」の間という意味になります。
 
ここで注意しなければいけないのが、この日時指定の正規表現は「国際規格 ISO-8601」形式で指定します。以下にさらっと説明しますが、詳しく知りたい方はリファレンスを参考にしてください。

ISO-8601の基本・拡張形式

基本形式:20160801T105220

拡張形式:2016-08-01T10:52:20

基本も拡張も「T」記号が入っていますが、これは「区切り」の意味です。「T」の前が日付で、「T」の後ろが時刻です。もっと詳しく知りたい方は、リファレンスを参考にしてください。

このサイトはLiruu Design(リールーデザイン)が運営しています

WEBデザイン制作
WEBショーケース
Liruu Blog