angularJSのminlengthとmaxlengthで文字数制限。

Level 2｜｜2016/07/29

今回は、入力の文字数に制限をかける「ng-minlength」属性と「ng-maxlength」属性を学びます。

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

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

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

<div>
    <label for="passwd">パスワード：</label>

<!-- テキストボックス -->
    <input id="passwd" name="passwd" type="password" ng-model="passwd"
      required ng-minlength="6" />

<!-- 必須項目 -->
    <span ng-show="myForm.passwd.$error.required">必須</span>
<!-- エラーメッセージ -->
    <span ng-show="myForm.passwd.$error.minlength">パスワードは6文字以上で入力</span>
</div>

<div>
    <label for="name">名前：</label>

<!-- テキストボックス -->
    <input id="name" name="name" type="text" ng-model="name"
      required ng-minlength="2" ng-maxlength="8" />

<!-- 必須項目 -->
    <span ng-show="myForm.name.$error.required">必須</span>
<!-- エラーメッセージ -->
    <span ng-show="myForm.name.$error.minlength">2文字以上で入力</span>
    <span ng-show="myForm.name.$error.maxlength">8文字以内で入力</span>
</div>

</form>
            

上記サンプルの「パスワード」については、最小文字数を設定し、「名前」については、最小文字数と最大文字数の両方を設定しています。直接テキストボックスのタグに「ng-minlength」属性、「ng-maxlength」属性を記述し、簡単に文字数をコントロールできます。

「ng-minlength」で最小入力文字数を設定

<div>
    <label for="passwd">パスワード：</label>

<!-- テキストボックス -->
    <input id="passwd" name="passwd" type="password" ng-model="passwd"
      required ng-minlength="6" />

<!-- 必須項目 -->
    <span ng-show="myForm.passwd.$error.required">必須</span>
<!-- エラーメッセージ -->
    <span ng-show="myForm.passwd.$error.minlength">パスワードは6文字以上で入力</span>
</div>

            

AngularJSの「ng-minlength」属性は、最小入力文字数を設定できます。つまり、〇文字以上入力しないとエラーだよという意味です。

<input ng-minlength="最小入力文字数">

「ng-maxlength」で最大入力文字数を設定

<div>
    <label for="name">名前：</label>

<!-- テキストボックス -->
    <input id="name" name="name" type="text" ng-model="name"
      required ng-maxlength="8" />

<!-- 必須項目 -->
    <span ng-show="myForm.name.$error.required">必須</span>
<!-- エラーメッセージ -->
    <span ng-show="myForm.name.$error.maxlength">8文字以内で入力</span>
</div>
            

AngularJSの「ng-maxlength」属性は、最大入力文字数を設定できます。つまり、〇文字以内で入力しないとエラーだよという意味です。

<input ng-maxlength="最大入力文字数">

「ng-minlength」「ng-maxlength」で最小・最大文字数を設定

<div>
    <label for="name">名前：</label>

<!-- テキストボックス -->
    <input id="name" name="name" type="text" ng-model="name"
      required ng-minlength="2" ng-maxlength="8" />

<!-- 必須項目 -->
    <span ng-show="myForm.name.$error.required">必須</span>
<!-- エラーメッセージ -->
    <span ng-show="myForm.name.$error.minlength">2文字以上で入力</span>
    <span ng-show="myForm.name.$error.maxlength">8文字以内で入力</span>
</div>
            

〇文字以上、〇文字以内という設定もできます。サンプルの指示は、「ng-minlength="2" ng-maxlength="8"」となっています。これは、2文字以上、8文字以内で入力しないとエラーだよという意味です。これで簡単に文字数制限を設定できました。