input

http://docs.angularjs.org/api/ng.directive:input

Angularのデータバインディングによって、HTML要素をコントロールします。入力要素の制御は、HTML5の入力要素のタイプに基づいており、古いブラウザでのHTML5の検証動作をPolyfill(ポリフィル)します。

使用方法
デモ

使用方法

このディレクティブは、カスタム要素として使用することができますが、IEの制限に注意してください。

<input
       ngModel="{string}"
       [name="{string}"]
       [required]
       [ngRequired="{boolean}"]
       [ngMinlength="{number}"]
       [ngMaxlength="{number}"]
       [ngPattern="{string}"]
       [ngChange="{string}"]>
</input>

引数

引数	説明
ngModel	型：`string` データ紐付けのための、Angular式を割り当てます。
name(optional)	型：`string` スコープに公開された入力要素の、フォーム配下でのプロパティ名です。
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>
    <div ng-controller="Ctrl">
      <form name="myForm">
        User name: <input type="text" name="userName" ng-model="user.name" required>
        <span class="error" ng-show="myForm.userName.$error.required">
          Required!</span><br>
        Last name: <input type="text" name="lastName" ng-model="user.last"
          ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.lastName.$error.minlength">
          Too short!</span>
        <span class="error" ng-show="myForm.lastName.$error.maxlength">
          Too long!</span><br>
      </form>
      <hr>
      <tt>user = {{user}}</tt><br/>
      <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
      <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
      <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
      <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
      <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
      <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
    </div>
  </body>
</html>

function Ctrl($scope) {
  $scope.user = {name: 'guest', last: 'visitor'};
}

it('should initialize to model', function() {
  expect(binding('user')).toEqual('{"name":"guest","last":"visitor"}');
  expect(binding('myForm.userName.$valid')).toEqual('true');
  expect(binding('myForm.$valid')).toEqual('true');
});

it('should be invalid if empty when required', function() {
  input('user.name').enter('');
  expect(binding('user')).toEqual('{"last":"visitor"}');
  expect(binding('myForm.userName.$valid')).toEqual('false');
  expect(binding('myForm.$valid')).toEqual('false');
});

it('should be valid if empty when min length is set', function() {
  input('user.last').enter('');
  expect(binding('user')).toEqual('{"name":"guest","last":""}');
  expect(binding('myForm.lastName.$valid')).toEqual('true');
  expect(binding('myForm.$valid')).toEqual('true');
});

it('should be invalid if less than required min length', function() {
  input('user.last').enter('xx');
  expect(binding('user')).toEqual('{"name":"guest"}');
  expect(binding('myForm.lastName.$valid')).toEqual('false');
  expect(binding('myForm.lastName.$error')).toMatch(/minlength/);
  expect(binding('myForm.$valid')).toEqual('false');
});

it('should be invalid if longer than max length', function() {
  input('user.last').enter('some ridiculously long name');
  expect(binding('user'))
    .toEqual('{"name":"guest"}');
  expect(binding('myForm.lastName.$valid')).toEqual('false');
  expect(binding('myForm.lastName.$error')).toMatch(/maxlength/);
  expect(binding('myForm.$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.user = {name: 'guest', last: 'visitor'};
}
</script>
  </head>
  <body>
    <div ng-controller="Ctrl">
      <form name="myForm">
        User name: <input type="text" name="userName" ng-model="user.name" required>
        <span class="error" ng-show="myForm.userName.$error.required">
          Required!</span><br>
        Last name: <input type="text" name="lastName" ng-model="user.last"
          ng-minlength="3" ng-maxlength="10">
        <span class="error" ng-show="myForm.lastName.$error.minlength">
          Too short!</span>
        <span class="error" ng-show="myForm.lastName.$error.maxlength">
          Too long!</span><br>
      </form>
      <hr>
      <tt>user = {{user}}</tt><br/>
      <tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br>
      <tt>myForm.userName.$error = {{myForm.userName.$error}}</tt><br>
      <tt>myForm.lastName.$valid = {{myForm.lastName.$valid}}</tt><br>
      <tt>myForm.lastName.$error = {{myForm.lastName.$error}}</tt><br>
      <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
      <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
      <tt>myForm.$error.minlength = {{!!myForm.$error.minlength}}</tt><br>
      <tt>myForm.$error.maxlength = {{!!myForm.$error.maxlength}}</tt><br>
    </div>
  </body>
</html>

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

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