input[number]

数値検証と変換付きのテキスト入力要素です。数値で無ければ、数値検証エラーのキーが設定されます。

使用方法

<input type="number"
       ng-model="{string}"
       [name="{string}"]
       [min="{string}"]
       [max="{string}"]
       [required]
       [ng-required="{string}"]
       [ng-minlength="{number}"]
       [ng-maxlength="{number}"]
       [ng-pattern="{string}"]
       [ng-change="{string}"]>

引数

引数 説明
ngModel

型:string

データ紐付けのための、Angular式を割り当てます。

name(optional)

型:string

スコープに公開された入力要素の、フォーム配下でのプロパティ名です。

min(optional)

型:string

もし、入力された値がminの値より小さい場合、min検証エラーのキーを設定します。

max(optional)

型:string

もし、入力された値がmaxの値より大きい場合、max検証エラーのキーを設定します。

required(optional)

型:string

もし、何も値が入力されなければ、required検証のエラーのキーを設定します。

ngRequired(optional)

型:string

ngRequired式がtrueと評価された際に、required属性を追加して要素に対して、必須であることを強制します。 データ紐付けにrequired属性をしたい場合に、reqired属性の代わりにngRequiredを使用します。

ngMinlength(optional)

型:number

もし、minlengthより値が短い場合、minlength検証エラーのキーを設定します。

ngMaxlength(optional)

型:number

もし、maxlengthより値が長い場合、maxlength検証エラーのキーを設定します。

ngPattern(optional)

型:string

もし、RegExpパターン式に値が一致しない場合、pattern検証エラーのキーがー設定されます。 /正規表現/のインラインのパターンか、スコープ式として定義された正規表現のパターンを指定します。

ngChange(optional)

型:string

ユーザーの操作によってinput要素の入力内容が変更された際に、ここで指定したAngular式が実行されます。

デモ

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      Number: <input type="number" name="input" ng-model="value"
                     min="0" max="99" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.number">
        Not valid number!</span>
      <tt>value = {{value}}</tt><br/>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
     </form>
  </body>
</html>
function Ctrl($scope) {
  $scope.value = 12;
}
it('should initialize to model', function() {
 expect(binding('value')).toEqual('12');
 expect(binding('myForm.input.$valid')).toEqual('true');
});

it('should be invalid if empty', function() {
 input('value').enter('');
 expect(binding('value')).toEqual('');
 expect(binding('myForm.input.$valid')).toEqual('false');
});

it('should be invalid if over max', function() {
 input('value').enter('123');
 expect(binding('value')).toEqual('');
 expect(binding('myForm.input.$valid')).toEqual('false');
});
<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/1.2.0-rc.2/angular.min.js"></script>
<script>function Ctrl($scope) {
  $scope.value = 12;
}
</script>
  </head>
  <body>
    <form name="myForm" ng-controller="Ctrl">
      Number: <input type="number" name="input" ng-model="value"
                     min="0" max="99" required>
      <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
      <span class="error" ng-show="myForm.input.$error.number">
        Not valid number!</span>
      <tt>value = {{value}}</tt><br/>
      <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
      <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
     </form>
  </body>
</html>

 Back to top

© 2017 Google
Licensed under the Creative Commons Attribution License 3.0.

このページは、ページトップのリンク先のAngularJS公式ドキュメント内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • AngularJSの更新頻度が高いため、元のコンテンツと比べてドキュメントの情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。