AngularJs Formsの詳細と簡単な例

12439 ワード

コントロール(input、select、textarea)は、ユーザがデータを入力する方法の1つである.Form(フォーム)は、関連するコントロールをグループ化するためのこれらのコントロールの集合です.
フォームとコントロールは検証サービスを提供しているので、ユーザーは無効な入力のヒントを受け取ることができます.これは、ユーザーがすぐにフィードバックを取得し、エラーを修正する方法を知っているため、より良いユーザー体験を提供します.クライアント検証は、良好なユーザー体験を提供する上で重要な役割を果たすが、簡単に迂回することができるため、クライアント検証は信頼できないことを覚えておいてください.サービス・エンドの検証は、セキュリティ・アプリケーションにとって依然として必要です.
一、Simple form
双方向データバインディングを理解する鍵directiveはngModelである.ngModelは、modelからviewおよびviewからmodelへの双方向データバインドを提供します.また、他のdirectiveにAPIを提供し、それらの動作を強化します.





  
  PropertyEvaluation
  



  
      : 

    Email: 

      :  
     
    

    
    
  
  form = {{user | json}}
 saved = {{saved | json}}


var app = angular.module("SimpleForm", []);
app.controller("MyCtrl", function ($scope,$window) {
$scope.saved = {};

$scope.update = function(user) {
$scope.saved = angular.copy(user);
};

$scope.reset = function() {
$scope.user = angular.copy($scope.saved);
};

$scope.reset();
//  な はuserに らない;
});
  
 、Using CSS classes
formおよびコントロール、ngModelをスタイル かにするには、 のclassを  します. ng-valid 
   ng-invalid 
   ng-pristine(  されていない)
 ng-dirty(   み)
 の では、CSSを  して フォームコントロールの   を  します. ではuser.nameとuser.Emailは  ですが、  した (dirty)、  が くなります.これにより、ユーザーがフォームと  するまで(コミット ?)その   が たされていないことに づいて、  いに を らした.



  
  CSSClasses
  



  
      : 

    Email: 

      :  
     
    

    
    
  
  form = {{user | json}}
 saved = {{saved | json}}


var app = angular.module("CSSClasses", []);
app.controller("MyCtrl", function ($scope,$window) {
$scope.saved = {};
$scope.update = function(user) {
$scope.saved = angular.copy(user);
};

$scope.reset = function() {
$scope.user = angular.copy($scope.saved);
};

$scope.reset();
//  な はuserに らない;
});
 、Binding to form and control state
angularでは、フォームはFormControllerのインスタンスです.フォームインスタンスは、nameプロパティを  に  してscopeに  することができます(ここでは  できませんが、scopeにはformのnameプロパティとずっとpropertyはありませんが、「document.フォーム 」という  があるので、  できます).  に、コントロールはNgModelControllerの である.コントロールインスタンスは、nameプロパティをformに  に  することができる.これは、formとコントロールの  の    が、  バインドエンティティ(standard binding primitives)を  してビューにバインドされるこの  に して    であることを しています.
これにより、  の を  の  で  できます. RESETボタンは、formが  された にのみ  できます.
   SAVEボタンは、formが  され、  が  な  にのみ  できます.
  はuser.Emailとuser.Agreeカスタムエラー  .
  



  
  ControlState
  



  
      : 

    
           
    
    Email: 

      :
         Email
              Email
    
      :  
     
    

       ：
    
    

          ~
    
    
  
  form = {{user | json}}
 saved = {{saved | json}}


var app = angular.module("ControlState", []);
app.controller("MyCtrl", function ($scope,$window) {
$scope.saved = {};
$scope.update = function(user) {
$scope.saved = angular.copy(user);
};

$scope.reset = function() {
$scope.user = angular.copy($scope.saved);
};

$scope.isUnchanged = function(user) {
return angular.equals(user, $scope.saved);
};

$scope.reset();
//  な はuserに らない;
});
 、Custom Validation
Angularは、ほとんどの  のHTMLフォームドメイン(input,text,number,url,email,radio,checkbox)タイプに  を  し、フォーム  のためのdirective(required,pattern,inlength,maxlength,min,max)もあります.
カスタム    をngModel controllerに  するには、  します(ここではngModelControllerに  されていますか?)のdirectiveを  して、  の  プラグインを  します.コントローラを るために、directiveは の のように  (directive  オブジェクトのrequireプロパティ)を  します.
ModelからViewへの  -いつModelが  されても、ngModelController.$formatters(modelが  されるとデータ     とフォーマット  がトリガーされる)  のfunctionがキューに んで  されるため、ここでは functionがmodelの をフォーマットし、NgModelController.$setValidity(http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity)コントロールの  ステータスを  します.
ViewからModelへの  -ユーザーがコントロールと  すると、NgModelControllerがトリガーされます.setViewValue.このとき、NgModelController$parsers(コントロールがDOMから を  すると、この  のすべてのメソッドが  され、 が  フィルタまたは  され、  されます)  のすべてのメソッドが  されます.
 の では、2つのdirectiveを  します.
1つ はintegerで、  が  な  であるかどうかを  します.たとえば、1.23は   を むため、  な です.    (push)の わりに  ヘッダ  (unshift)を うことに  してください.これは、このコントロールの (このArrayがキューとして  されると  される)を  に  し、  するために、  が  する に     を  する  があるからです.
2  のdirectiveはsmart-floatです. は「1.2」と「1,2」を   な      「1.2」に  した.ここではHTML 5のinputタイプ「number」を  することはできません.ブラウザでは、「1,2」などの  な  の  は  されていません(「1.2」しか  されていません).



  
  CustomValidation
  



  
    
        (   0 - 10):{{size}}

                
      
             0 10  
      
    
    
        （   ）：
      
      {{length}}

                 
    
  



  var app = angular.module("CustomValidation", []);
  var INTEGER_REGEXP = /^\-?\d*$/;
  app.directive("integer", function () {
    return {
      require:"ngModel",//NgModelController
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function (viewValue) {//$parsers，View Model   
          if(INTEGER_REGEXP.test(viewValue)) {
            //     
            ctrl.$setValidity("integer", true);
            return viewValue;
          }else {
            //   ……
            ctrl.$setValidity("integer", false);
            return undefined;
          }
        });
      }
    };
  });
  var FLOAT_REGEXP = /^\-?\d+(?:[.,]\d+)?$/;
  app.directive("smartFloat", function () {
    return {
      require:"ngModel",
      link:function(scope,ele,attrs,ctrl) {
        ctrl.$parsers.unshift(function(viewValue) {
          if(FLOAT_REGEXP.test(viewValue)) {
            ctrl.$setValidity("float", true);
            return parseFloat(viewValue.replace(",", "."));
          }else {
            ctrl.$setValidity("float", false);
            return undefined;
          }
        });
      }
    }
  });




  
五、Implementing custom form control(using ngModel)
AngularはすべてのHTMLの基礎コントロール(input,select,textarea)を実現し、多くのシーンに適しています.しかし、より柔軟にする必要がある場合は、directiveを作成することで、カスタムフォームコントロールの目的を達成することができます.
コントロールをngModelと一緒に作成し、双方向のデータバインドを実現するには、次の必要があります.
renderメソッドを実装するには、すべてのNgModelController.$formattersメソッドの後、データを表示するメソッド.
$setViewValueメソッドを呼び出します.ユーザーがコントロールと対話しても、modelは応答の更新を必要とします.これは通常DOMイベントリスナーで実現される.$compileProviderを表示できます.directiveで詳細を取得します.
次の例では、編集可能な要素に双方向データバインドプロパティを追加する方法を示します.



  
  CustomControl
  



  My Little Dada
  model = {{content}}
reset model tirgger model to view($render)


var app = angular.module("CustomControl", []);
app.controller("MyCtrl", function ($scope) {
$scope.reset = function() {
$scope.content = "My Little Dada";
//ここでNgModelControllerを  するにはどうすればいいですか?もしあなた が っているならば、  することができることを みます!ありがとう
};
});
app.directive("contenteditable", function () {
return {
require:"ngModel",
link:function (scope, ele, attrs, ctrl) {
//view -> model
ele.bind("blur keyup",function() {
scope.$apply(function() {
console.log("setViewValue");
ctrl.$setViewValue(ele.text());
});
});

//model -> view
ctrl.$render = function(value) {
console.log("render");
ele.html(value);
};
//   の み み
ctrl.$setViewValue(ele.text());
}
};
});


                                    
                                    
                                    
                                    
                                

                                


                            


                            
                                    
                                        

                                        プロトタイプモード--java実装
                                

                                    3週目のジョブ(更新中...)