formとngModel

10928 ワード
Model
リファレンス
https://docs.angularjs.org/api/ng/type/ngModel.NgModelController
https://docs.angularjs.org/api/ng/type/form.FormController
 
Angularはフォームコマンドを提供しており、ngModelとよく一緒に作業しているので、一緒に紹介します.
 
まず基本的なng-modelについて説明します
 
ng-model作用はdouble binding
ng-modelは異なるelement上で異なる同期モードがあり、これらのangularはすでに多くのパッケージを手伝ってくれた.
もちろんangularは、ngModelという命令のcontroller(ngModelという名前)においてもいくつかの方法を提供しており、自分のコントロール(e.g.:checkBox,dropDownList)でもdouble bindingを行うことができます.
 
さらにng-modelにはいくつかの基本的なoptionが設定できます(1.3ならでは)
<input type="text" name="userName"

           ng-model="user.name"

           ng-model-options="{ updateOn: 'blur', debounce: 1000 ,getterSetter: true  }"/><br />
<pre>user.name = <span ng-bind="user.name()"></span></pre>

updateOnは、blur/keyupなどのelemが更新されるイベント名を書き込む.
debounceはdeley updateミリ秒であり、一般的にkeydownに連絡するたびに更新されるのではなく、ユーザーが入力を停止するまで更新を実行することを望んでいません.delayを1つ置くことができます
getterSetter=trueは、$scopeなどの依存属性に使用できます.name = function (){ retrun xx; } nameがメソッドである場合
 
ng-model controllerにはどんな属性方法があるか見てみましょう
ngModel controller  
                     var ngModelController = {

                         "$viewValue": "12", //        "$modelValue": "12", //$scope value "$parsers": [null, null], //   null   json    ，  function    "$formatters": [null, null], "$viewChangeListeners": [null], "$pristine": false, "$dirty": true, "$valid": true, "$invalid": false, "$name": "name", "$error": { "required": false, //   true   error , valid fail "minlength": false }, "$$validityState": {} //       }

$parsers、$formattersはデータブロック
ビューto scopeのたびに$parsersのすべてのメソッドがトリガーされます.検証や交換など、メソッドでデータを処理することができます.$formattersはscope to view時にトリガーされます
$viewChangeListeners公式サイトの説明は
Array of functions to execute whenever the view value has changed. 各view value changeトリガ
It is called with no arguments, and its return value is ignored.//no para , no return 
This can be used in place of additional $watches against the model value.//使い道がよくわからない
$dirty、$validなどは、フォームと組み合わせて使用され、フォームはこの値の合計を統計します.
いくつかの方法があります.
「$render」、「$isEmpty」、「$setValidity」、//よく使われるのはこれで、para(検証命令、isValid)「$setPristine」、「$setView Value」
$renderと$setViewValueは私たちがコントロールをするときに必ずすごいです.
$renderはangularに呼び出される方法で、angularがページをレンダリングする方法を教えてくれます.
digestがscope value changedを発見すると、angularは$modelValueが$formattersを経て得た値を$viewValueに入れ、(このとき$viewValue=$modelValueが$formattersを経た)私たちが書いた$renderをトリガーします.
だから私たちは$renderの中で$viewValueを取得してdomに書きます.
$setView Valueは逆にangularが書いた方法で、私たちはそれを呼び出し、domがchangeやblurなどのイベントをトリガーしたとき、valueを取得し、私たちはこの$setView Valueを呼び出します.
最初のステップangularは$viewValue=newValueになり、$parsersで得られた値を$modelValueとscope valueに書き込む.
外伝:
余談ですが、フレームワークとライブラリの違い、ライブラリには他の人の方法がたくさんあります.私たちは書く過程を担当し、間でライブラリの方法を呼び出します.フレームワークは反対に、私たちは多くの方法を書いて、プロセスはフレームワークが定義されており、プロセスを実行するときに私たちが書いた方法を呼び出します.どこから见たか忘れて、これは私に多くのことを悟らせて、特に分かち合います).
 
$setValidityはフォームとの通信を検証するために使用されます. 
ここでは、カスタム検証コマンドの例を示します.
    <div ng-app="app" ng-controller="email">

        <div ng-form="emailForm">

            <input type="text" name="email" ng-model="email" is-abc />

            <span ng-click="see()">{{ emailForm.$valid }}</span>

        </div>

    </div>



        angular.module("app", []).

             directive("isAbc", ["$timeout", function ($timeout) {

                 return {

                     restrict: "A",

                     require: "ngModel",

                     link: function ($scope, $element, $attrs, $ctrl) {

                         var validator = function (v) {

                             $timeout.cancel($ctrl.timeout);

                             $ctrl.timeout = $timeout(function () {

                                 if (v == "abc") {

                                     $ctrl.$setValidity('isAbc', true);

                                     return v;

                                 } else {

                                     $ctrl.$setValidity('isAbc', false);

                                     return undefined;

                                 }

                             }, 2000);

                         }

                         $ctrl.$parsers.push(validator);

                     }

                 }

             }]);

ここではis-abc命令を作成し,ngModelをブロックし,検証手法を追加し,$setValidityを介してformに通知し,ここでは遅延検証手法も行った.
 
ng-form‖form指令
ng-formはformと同じで、controllerの名前はformです
    <div ng-app="app" ng-controller="email">

        <form name="emailForm">

            <input type="text" name="email" ng-model="email" required />

            <input type="text" name="name" ng-model="email" required ng-minlength="2" />

            <span ng-click="see()">{{ emailForm.$valid }}</span>

        </form>

    </div>

formにはいくつかの規範があり、必ずnameが必要で、中のコントロールにもnameが必要で、ng-modelでコミュニケーションしたほうがいいです.angularは自動的にcontrollerを追加するなどのことをパッケージしているからです.
 
流れは大体こうですが、
form->model->検証命令
コマンドはmodelをブロックして検証するなど、modelでformに通知する
form controllerにはいくつかの属性があります
                     var formController = {

                         "$name": "emailForm",

                         "$dirty": false, //form   

                         "$pristine": true, //form    

                         "$valid": false, //    pass

                         "$invalid": true, // fail 

                         "email": {}, //key form     nama,value     ngModel controller   ,

                         "$error": {"required" : []} //key   error     ，value     ,   invalid    ngModel controller   

                     }

主にフォーム内のコントロールを収録したng-model controllerリファレンス
formでのメソッド
「$addControl」、//ngModel controllerを追加すると、ngModelは自動的に追加されます.カスタムコマンドが「$removeControl」、「$setValidity」、para(検証コマンド、isValid、ngModel controller)set ngModelのvalid「$setDirty」、no para、setプロパティ「$setPristine」no para、setプロパティ「$setPristine」no para、setプロパティ
  
angularが提供する方法を呼び出すと、form model parentなどを直列に接続します. 
更新:2015-05-23
バージョン1.3以降はngModelの検証が簡単になりましたngModel.$asyncValidators or ngModel.Validatorsは検証方法を入力します.
ngModelがネストされている場合、命令がネストされる場合があり、ngModelもネストされる場合があります.直接このように書く人もいるかもしれません.
scope : {
　　ngModel : "="
}
表面的にはこれは問題ありません.angularは確かにこの値を同期させることができますが、このように書くと、親層の$parsers 。です.
正しい方法は、子レイヤで$renderと$setViewValueを使用して親レイヤのngModelを変更することです.
Polkit CVE - 2021 - 3560
HTTP(s)ベース