AngularJs Forms詳解及簡(jiǎn)單示例

更新時(shí)間：2016年09月01日 16:44:56 作者：Lcllao

本文主要介紹AngularJs Forms，這里整理了相關(guān)資料及簡(jiǎn)單示例代碼，有需要的朋友可以參考下

控件（input、select、textarea）是用戶輸入數(shù)據(jù)的一種方式。Form（表單）是這些控件的集合，目的是將相關(guān)的控件進(jìn)行分組。

　　表單和控件提供了驗(yàn)證服務(wù)，所以用戶可以收到無(wú)效輸入的提示。這提供了更好的用戶體驗(yàn)，因?yàn)橛脩艨梢粤⒓传@取到反饋，知道如何修正錯(cuò)誤。請(qǐng)記住，雖然客戶端驗(yàn)證在提供良好的用戶體驗(yàn)中扮演重要的角色，但是它可以很簡(jiǎn)單地被繞過(guò)，因此，客戶端驗(yàn)證是不可信的。服務(wù)端驗(yàn)證對(duì)于一個(gè)安全的應(yīng)用來(lái)說(shuō)仍然是必要的。

一、Simple form

　　理解雙向數(shù)據(jù)綁定的關(guān)鍵directive是ngModel。ngModel提供了從model到view和view到model的雙向數(shù)據(jù)綁定。并且，它還向其他directive提供API，增強(qiáng)它們的行為。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="SimpleForm">
<head>
  <meta charset="UTF-8">
  <title>PropertyEvaluation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
  </style>
</head>
<body>
<div ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate>
    名字: <input ng-model="user.name" type="text"><br/>
    Email: <input ng-model="user.email" type="email"><br/>
    性別: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">還原上次保存</button>
    <button ng-click="update(user)">保存</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>saved = {{saved | json}}</pre>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  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();
    //不合法的值將不會(huì)進(jìn)入user
  });
</script>
</body>
</html>

二、Using CSS classes

　　為了讓form以及控件、ngModel富有樣式，可以增加以下class：

ng-valid
ng-invalid
ng-pristine（從未輸入過(guò)）
ng-dirty（輸入過(guò)）

　　下面的例子，使用CSS去顯示每個(gè)表單控件的有效性。例子中，user.name和user.email都是必填的，但當(dāng)它們修改過(guò)之后（dirty），背景將呈現(xiàn)紅色。這確保用戶不會(huì)直到與表單交互之后（提交之后？），發(fā)現(xiàn)未能滿足其有效性，才為一個(gè)錯(cuò)誤而分心。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CSSClasses">
<head>
  <meta charset="UTF-8">
  <title>CSSClasses</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<div ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" type="text" required><br/>
    Email: <input ng-model="user.email" type="email" required><br/>
    性別: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>saved = {{saved | json}}</pre>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  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();
    //不合法的值將不會(huì)進(jìn)入user
  });
</script>
</body>
</html>

三、Binding to form and control state

　　在angular中，表單是FormController的一個(gè)實(shí)例。表單實(shí)例可以隨意地使用name屬性暴露到scope中（這里沒(méi)看懂，scope里面沒(méi)有一個(gè)跟form的name屬性一直的property，但由于有“document.表單名”這種方式，所以還是可以獲取到的）。相似地，控件是NgModelController的實(shí)例?？丶?shí)例可以相似地使用name屬性暴露在form中。這說(shuō)明form和控件（control）兩者的內(nèi)部屬性對(duì)于使用標(biāo)準(zhǔn)綁定實(shí)體（standard binding primitives）綁定在視圖中的這個(gè)做法是可行的。

　　這允許我們通過(guò)以下特性來(lái)擴(kuò)展上面的例子：

RESET按鈕僅僅在form發(fā)生改變之后才可用。
SAVE按鈕僅僅在form發(fā)生改變而且輸入有效的情況下可用。
為user.email和user.agree定制錯(cuò)誤信息。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="ControlState">
<head>
  <meta charset="UTF-8">
  <title>ControlState</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<div ng-controller="MyCtrl" class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    名字: <input ng-model="user.name" name="userName" type="text" required><br/>
    <div ng-show="formName.userName.$dirty&&formName.userName.$invalid">
      <span>請(qǐng)?zhí)顚?xiě)名字</span>
    </div>
    Email: <input ng-model="user.email" name="userEmail" type="email" required><br/>
    <div ng-show="formName.userEmail.$dirty && formName.userEmail.$invalid">提示:
      <span ng-show="formName.userEmail.$error.required">請(qǐng)?zhí)顚?xiě)Email</span>
      <span ng-show="formName.userEmail.$error.email">這不是一個(gè)有效的Email</span>
    </div>
    性別: <input value="男" ng-model="user.gender" type="radio">男
    <input value="女" ng-model="user.gender" type="radio">女
    <br/>
    <input type="checkbox" ng-model="user.agree" name="userAgree" required/>我同意：
    <input type="text" ng-show="user.agree" ng-model="user.agreeSign" required/>
    <br/>
    <div ng-show="!formName.userAgree || !user.agreeSign">請(qǐng)同意并簽名~</div>
    <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
    <button ng-click="update(user)" ng-disabled="formName.$invalid || isUnchanged(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>saved = {{saved | json}}</pre>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  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();
    //不合法的值將不會(huì)進(jìn)入user
  });
</script>
</body>
</html>

四、Custom Validation

　　angular為大多數(shù)公共的HTML表單域（input，text,number,url,email,radio,checkbox）類型提供了實(shí)現(xiàn)，也有一些為了表單驗(yàn)證的directive（required，pattern,，inlength，maxlength，min，max）。

　　可以通過(guò)定義增加定制驗(yàn)證函數(shù)到ngModel controller（這里是連在一起的ngModelController嗎？）中的directive來(lái)定義我們自己的驗(yàn)證插件。為了得到一個(gè)controller，directive如下面的例子那樣指定了依賴（directive定義對(duì)象中的require屬性）。

Model到View更新 - 無(wú)論什么時(shí)候Model發(fā)生改變，所有在ngModelController.$formatters（當(dāng)model發(fā)生改變時(shí)觸發(fā)數(shù)據(jù)有效性驗(yàn)證和格式化轉(zhuǎn)換）數(shù)組中的function將排隊(duì)執(zhí)行，所以在這里的每一個(gè)function都有機(jī)會(huì)去格式化model的值，并且通過(guò)NgModelController.$setValidity（http://code.angularjs.org/1.0.2/docs/api/ng.directive:ngModel.NgModelController#$setValidity）修改控件的驗(yàn)證狀態(tài)。

View到Model更新 - 一個(gè)相似的方式，無(wú)論任何時(shí)候，用戶與一個(gè)控件發(fā)生交互，將會(huì)觸發(fā)NgModelController.$setViewValue。這時(shí)候輪到執(zhí)行NgModelController$parsers（當(dāng)控件從DOM中取得值之后，將會(huì)執(zhí)行這個(gè)數(shù)組中所有的方法，對(duì)值進(jìn)行審查過(guò)濾或轉(zhuǎn)換，也進(jìn)行驗(yàn)證）數(shù)組中的所有方法。

　　在下面的例子中我們將創(chuàng)建兩個(gè)directive。

第一個(gè)是integer，它負(fù)責(zé)驗(yàn)證輸入到底是不是一個(gè)有效的整數(shù)。例如1.23是一個(gè)非法的值，因?yàn)樗?shù)部分。注意，我們通過(guò)在數(shù)組頭部插入（unshift）來(lái)代替在尾部插入（push），這因?yàn)槲覀兿胨紫葓?zhí)行并使用這個(gè)控件的值（估計(jì)這個(gè)Array是當(dāng)作隊(duì)列來(lái)使用的），我們需要在轉(zhuǎn)換發(fā)生之前執(zhí)行驗(yàn)證函數(shù)。

第二個(gè)directive是smart-float。他將”1.2”和”1,2”轉(zhuǎn)換為一個(gè)合法的浮點(diǎn)數(shù)”1.2”。注意，我們?cè)谶@不可以使用HTML5的input類型”number”，因?yàn)闉g覽器不允許用戶輸入我們預(yù)期的非法字符，如”1,2”（它只認(rèn)識(shí)”1.2”）。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomValidation">
<head>
  <meta charset="UTF-8">
  <title>CustomValidation</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    .css-form input.ng-invalid.ng-dirty {
      background-color: #fa787e;
    }
    .css-form input.ng-valid.ng-dirty {
      background-color: #78fa89;
    }
  </style>
</head>
<body>
<div class="ng-cloak">
  <form novalidate class="css-form" name="formName">
    <div>
      大小(整數(shù) 0 - 10):<input integer type="number" ng-model="size" name="size" min="0" max="10"/>{{size}}<br/>
      <span ng-show="formName.size.$error.integer">這不是一個(gè)有效的整數(shù)</span>
      <span ng-show="formName.size.$error.min || formName.size.$error.max">
        數(shù)值必須在0到10之間
      </span>
    </div>
    <div>
      長(zhǎng)度（浮點(diǎn)數(shù)）：
      <input type="text" ng-model="length" name="length" smart-float/>
      {{length}}<br/>
      <span ng-show="formName.length.0error.float">這不是一個(gè)有效的浮點(diǎn)數(shù)</span>
    </div>
  </form>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  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;
          }
        });
      }
    }
  });
</script>
</body>
</html>

五、Implementing custom form control (using ngModel)

　　angular實(shí)現(xiàn)了所有HTML的基礎(chǔ)控件（input，select，textarea），能勝任大多數(shù)場(chǎng)景。然而，如果我們需要更加靈活，我們可以通過(guò)編寫(xiě)一個(gè)directive來(lái)實(shí)現(xiàn)自定義表單控件的目的。

　　為了制定控件和ngModel一起工作，并且實(shí)現(xiàn)雙向數(shù)據(jù)綁定，它需要：

實(shí)現(xiàn)render方法，是負(fù)責(zé)在執(zhí)行完并通過(guò)所有NgModelController.$formatters方法后，呈現(xiàn)數(shù)據(jù)的方法。

調(diào)用$setViewValue方法，無(wú)論任何時(shí)候用戶與控件發(fā)生交互，model需要進(jìn)行響應(yīng)的更新。這通常在DOM事件監(jiān)聽(tīng)器里實(shí)現(xiàn)。
　　可以查看$compileProvider.directive獲取更多信息。

　　下面的例子展示如何添加雙向數(shù)據(jù)綁定特性到可以編輯的元素中。

<!DOCTYPE HTML>
<html lang="zh-cn" ng-app="CustomControl">
<head>
  <meta charset="UTF-8">
  <title>CustomControl</title>
  <style type="text/css">
    .ng-cloak {
      display: none;
    }
    div[contenteditable] {
      cursor: pointer;
      background-color: #D0D0D0;
    }
  </style>
</head>
<body ng-controller="MyCtrl">
<div class="ng-cloak">
  <div contenteditable="true" ng-model="content" title="點(diǎn)擊后編輯">My Little Dada</div>
  <pre>model = {{content}}</pre>
  <button ng-click="reset()">reset model tirgger model to view($render)</button>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
  var app = angular.module("CustomControl", []);
  app.controller("MyCtrl", function ($scope) {
    $scope.reset = function() {
      $scope.content = "My Little Dada";
      //在這里如何獲取NgModelController呢？如果你們知道，希望可以指點(diǎn)指點(diǎn)！謝謝
    };
  });
  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());
      }
    };
  });
</script>
</body>
</html>

您可能感興趣的文章: