アングラーはフォーム検証と提出機能を実現する。

本例は、Anglarフレームにより、簡単なフォーム検証を行う。
一、html構造
1、bootstrapの助けを借りて簡単なフォームを作成しました。
コードの主要部分は以下の通りです。 

<div class="container" style="margin-top: 30px;" ng-controller="myCtrl">
  <h1 style="text-align: center">      </h1>
  <form action="upload.js" class="form-horizontal" name="myForm">
    <div class="form-group">
      <label for="username" class="col-sm-3 control-label">   </label>
      <div class="col-sm-9">
        <input type="text" autocomplete="false" name="username" placeholder="   " ng-model="data.username" id="username" class="form-control" required>
        <div class="alert alert-danger help-block" >
                   5 
        </div>
        <div class="alert alert-danger help-block" >
                   15 
        </div>
      </div>
    </div>
  </form>
 </div>

2、フォーム検証によくある問題と命令
1）、問題：
」データをどのように結合するか――双方向結合
」検証フォーム――正規表現
」エラーメッセージを表示します。
」全体のフォームの検証
」検証されていないフォームの提出を避ける
」複数回の提出を防ぐ
2）常用命令
」コマンド:
ng-model、ng-required、ng-pattern、ng-maxlength、ng-minlength、ng-change
」スタイル:
ng-valid、ng-invalid、ng-presine、ng-dirty
』form制御変数
form Name.input FieldName.$error:フィールドエラー情報
form Name.input FieldName.$dirty:フィールドは変更されますか？
form Name.input FieldName.$presine:フィールドは初期状態ですか？
form Name.input FieldName.$valid:フィールドは有効ですか？
form Name.input FieldName.$invalid:フィールドは無効ですか？
二、機能実現
2.1ユーザ名認証
ユーザーがユーザー名フィールドを入力して検証するのは主に長さの検証と必要かどうかです。
1、ng-modelはフォームデータをバインドして、anglarの検証アプリを使用する。
2、ng-minlength、ng-maxlength所定のフィールドの長さ、required規定のフィールドは必ず記入します。
3、エラーメッセージ情報はformName.inputFieldName.$error.minlength/maxlengthによって表示するかどうかを決定します。入力が不正である場合、$errorに対応するエラー情報はtrueとなります。
以下のとおりです

  <div class="form-group">
    <label for="username" class="col-sm-3 control-label">   </label>
    <div class="col-sm-9">
      <input type="text" autocomplete="false" name="username" placeholder="   " ng-model="data.username" id="username" ng-minlength="5" ng-maxlength="15" class="form-control" required>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.minlength">
                 5 
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.username.$error.maxlength">
                 15 
      </div>
    </div>
  </div>

2.2パスワード確認検証
パスワードの確認検証は、2回入力したパスワードが一致していることを保証し、確認パスワードが入力されていない前に検証しないこと。
1、バインディングデータng-model=data.pwdConfirm（すべてのフォームデータはdataオブジェクトに保存されます）
2、data.pwdConfirmを判断！==data.passwordは二つのパスワードが一致するかどうかを確認します。
3、form Name.input Field.$dirtyでこの項目が記入されたかどうか確認します。

  <div class="form-group">
    <label class="col-sm-3 control-label">    </label>
    <div class="col-sm-9">
      <input type="password" name="pwdConfirm" ng-model="data.pwdConfirm" placeholder="    " id="pwdConfirm" required class="form-control">
      <div class="alert alert-danger" ng-show="data.pwdConfirm!==data.password&&myForm.pwd.$dirty">
                  
      </div>
    </div>
  </div>

2.3メールアドレス検証
メールアドレスの検証は主にメールボックスのフォーマットが正しいかどうか、フィールドの長さを確認します。
1、H 5でtype属性値emailを追加してください。
2、ng-pattern命令によりメール検証の正則を定義する。
3、メールアドレス検証常用正規表現：^([a-zA-Z 0-9_-])+@([[a-zA-Z 0-9_-）+(.[a-zA-Z 0-9_-）+
4、myForm.email.error.patternを通じてメールアドレスのフォーマットが正しいかどうかを検証する。

  <div class="form-group">
    <label class="col-sm-3 control-label">  </label>
    <div class="col-sm-9">
      <input type="email" name="email" ng-model="data.email" placeholder="  " class="form-control" required ng-pattern="/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/">
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.minlength">
                5 
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.pattern">
                  
      </div>
      <div class="alert alert-danger help-block" ng-show="myForm.email.$error.maxlength">
                30 
      </div>
    </div>
  </div>

2.4シングルチェックボックス
シングルチェックボックスは主にデータバインディング問題とチェックボックスのデータレンダリングを決定します。
1、データをdataオブジェクトの属性として結びつける
2、複数選択のオプション値をng-repeatで巡回します。
3、value値を設定して提出する時に値を区分する

  <div class="form-group">
    <label class="col-sm-3 control-label">  </label>
     <div class="col-sm-9">
       <label class="radio-inline">
         <input type="radio" name="sex" value="1" ng-model="data.sex" /> 
       </label>
       <label class="radio-inline">
         <input type="radio" name="sex" value="0" ng-model="data.sex" /> 
       </label>
     </div>
  </div>
   <div class="form-group">
    <label class="col-sm-3 control-label">  </label>
     <div class="col-sm-9">
       <label class="radio-inline" ng-repeat="hobby in hobbies">
         <input type="checkbox" name="hobby" ng-model="hobbiesC" value="{{hobby.id}}" />&nbsp;{{hobby.name}}
       </label>
     </div>
  </div>
  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="  ">
    <input type="submit" class="btn btn-primary " value="  ">
  </div>

2.5都市二級連動
1、都市データの定義：各都市の対象はid、parent、name属性、idは各都市の省に特有で、parentは父級の省または都市によって決められます。
2、都市データを、ng-optionsコマンドで遍歴する
2.5.1都市データモデル
scope.ciiesでデータモデルを定義します。

   $scope.cities=[
    {
      id:1,
      parent:0,
      name:'   '
    },
    {
      id:2,
      parent:1,
      name:'   '
    },
    ...
  ]

2.5.2.中レンダリング都市データ
ng-optionsコマンドとng-modelコマンドでデータを巡回し、デフォルト値を設定します。

  <div class="form-group">
    <label class="col-sm-3 control-label">   </label>
     <div class="col-sm-3">
       <select name="birthAddress" id="" ng-model="data.province" ng-options="c.id as c.name for c in cities">
         <option value="">--     --</option>
       </select>
     </div>
  </div>

説明:
1、ng-options="obj.name for obj in datas"のよくある使い方は、Obj.id as obj.nameを通じてoptionタグを設定するvalue値がidで、内容はnameです。
2、ng-modelはselectのデフォルト値を設定するために使用できます。
2.5.3フィルターを定義し、省、都市などをフィルタリングする。

.filter("cityFilter",function(){
  return function(input,parent){
    var filtedData=[];
    angular.forEach(input,function(value,key){
      if(value.parent===parent){
        filtedData.push(value)
      }
    })
    return filtedData;
  }
})

説明:
1、上述のようにcityFilterを定義することによって、一つのparentがパラメータとして入ってきたデータを遍歴し、広く伝わってきたparentと同等かどうかを判断して、現在の都市はどのレベルですか？
2、戻ってきたfiltedDataはフィルタ結果です。
3、angglar.forEach（obj、fn）のサブジェネレータを使用して、その中にfnは三つのパラメータが入ってきて、それぞれvalue、key、objです。valueは現在遍歴されているオブジェクトであり、keyは遍歴されている唯一の識別であり、objは遍歴されている配列またはオブジェクト自体である。
使用(省): ng-options="c.id as c.name for c in cities Filter:0"
2）都市対応選択
1、data.provinceによってフィルタパラメータとして、都市フィルタを行います。
2、区域の選択は同じで、都市を選択したら、区域オプションボックス（ng-show指令）が現れます。

  <div class="col-sm-2">
    <select name="birthC" ng-model="data.cities" ng-options="c.id as c.name for c in cities|cityFilter:data.province">
      <option value="">--     --</option>
    </select>
  </div>
  <div class="col-sm-2" ng-show="!myForm.birthC.$pristine">
    <select name="birthD" ng-model="data.district" ng-options="c.id as c.name for c in cities|cityFilter:data.cities">
      <option value="">--     --</option>
    </select>
  </div>

2.6フォーム提出
1、機能需要：フォーム検証が通らない場合、提出ボタンを失効させます。
html構造:

  <div class="col-sm-9 col-sm-offset-3">
    <input type="reset" class=" btn btn-danger" value="  " ng-click="reset()">
    <input type="submit" class="btn btn-primary " value="  " ng-disabled="myForm.$invalid">
  </div>

js:

  $scope.reset=function(){
    $scope.myForm.$setPristine();
  }

注：フォームには$set Pristine()の方法があります。フォームを元の状態にリセットします。class、dirty、presineは元の状態に戻ります。ただし、フォームのエラー情報はerrorによって隠されませんので、フォームを検証する際には、エラー情報はすべて$dirtyで判断されます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。