本文也同步發表在我的公眾號“我的天空”
表單基礎
表單是HTML中很重要的一個部分，基本上我們的信息錄入都依靠表單，接下來我們學習如何在AngularJS中使用表單，首先看以下示例代碼：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()">
<p>用戶名:
<input type="text" ng-model="user.name">
</p>
<p>郵箱:
<input type="text" ng-model="user.email">
</p>
<input type="submit" value="提交">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.submit=function(){
alert(JSON.stringify($scope.user));
}
});
</script>
示例代碼AngularJS_13.html
分析以上代碼，我們添加了一個表單，在表單中增加了ng-submit指令，這樣我們就無需在提交按鈕中添加ng-click了，兩者的區別是，前者有多種方式觸發表單提交事件：單擊提交按鈕、文本框內回車等。
接下來要注意的是，我們對於文本框的ng-model數據綁定不是“name”與“email”，而是“user.name”與“user.email”，但是在控制器代碼中，我們並未聲明user對象，即沒有類似於“var user={}”對象聲明代碼。在AngularJS中，當使用ng-model時，其會自動創建所必須的對象和鍵來實例化數據綁定，因此，初始時是沒有user對象的，只有在當用戶名或email框中輸入字符時，才會創建user對象，並賦值到相應的綁定字段。
最后，我們在submit方法中顯示user對象，為了實現可見性，我們使用了JSON.stringfy來將對象轉換成字符串以便顯示其內容。
輸入驗證
在表單的輸入中，總是離不開輸入驗證，如不能為空、必須為郵箱格式、是否為數字、輸入字符長度范圍等，我們來看看AngularJS是如何實現輸入驗證的，看以下代碼：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm" novalidate>
<p>用戶名:
<input type="text" ng-model="user.name" ng-minlength="4" required>
</p>
<p>郵箱:
<input type="email" ng-model="user.email" required>
</p>
<input type="submit" value="提交" ng-disabled="myForm.$invalid">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.submit=function(){
alert(JSON.stringify($scope.user));
}
});
</script>
示例代碼AngularJS_14.html
以上代碼是在示例13上更改的，我們主要分析一下變更的部分。
首先我們為表單指定了名稱為“myForm”以便之后使用，同時在form中添加了“novalidate”屬性，這個是阻止html5默認的輸入驗證，因為我們要使用自己的輸入驗證。
隨后在用戶名輸入框中，我們增加了ng-minlength指令，規定了用戶名的最小長度為4個字符，同時添加了“required”屬性，表明該字段不能為空。在郵件輸入框中，我們設置了“type='email'”，表明該輸入框需要對輸入內容做郵箱有效性驗證。
最后在提交按鈕中，我們添加了指令ng-disabled來控制該按鈕的有效性，其值等於myForm.$invalid，如果在表單中，只要有不符合輸入驗證的，則該值便為false，自然提交按鈕便無效。
在該段代碼中，我們通過驗證器（如ng-minlength）、表單狀態(如$invalid)等的綜合使用來實現輸入驗證，我們做一個總結：
AngularJS驗證器
-
required 確保字段必需
-
ng-required 確保字段必需，與required不同的是，我們可以對ng-required賦值
-
ng-minlength 規定字段的最小長度
-
ng-maxlength 規定字段的最大長度
-
ng-pattern 指定正則表達式對字段進行有效性檢查
-
type="email" 輸入字段必須為郵箱
-
type="number" 輸入字段必須為數字
-
type="date" 如果瀏覽器支持，顯示一個日期選擇器，否則作為一個文本輸入
-
type="url" 輸入字段必須為url
AngularJS表單狀態
-
$invalid 當任一字段驗證無效時
-
$valid 與$invalid相反，當所有字段驗證有效時
-
$pristine 表單的初始狀態，此時無任何被修改的表單元素
-
$dirty 與$pristine相反，表明表單元素發生了修改
-
$error 表明表單元素驗證失敗
表單狀態均是布爾值，我們一般利用其來顯示、隱藏、禁用或啟用HTML元素，對於$error狀態，我們接下來將進一步說明。
在示例14中，當有字段驗證未通過時，我們只是簡單的將提交按鈕設置為無效，但是通常，我們需要提供更多的錯誤信息，來引導客戶輸入正確的信息，這個一般就要用到$error了，來看以下代碼：
<body ng-app="myApp" ng-controller="person">
<form ng-submit="submit()" name="myForm" novalidate>
<p>用戶名:
<input type="text" name="name" ng-model="user.name" ng-minlength="4" required>
<span ng-show="myForm.name.$error.required">用戶名是必須的</span>
<span ng-show="myForm.name.$error.minlength">用戶名長度必須大於4位</span>
</p>
<p>郵箱:
<input type="email" name="email" ng-model="user.email" required>
<span ng-show="myForm.email.$error.email">非法的郵箱</span>
<span ng-show="myForm.email.$error.required">郵箱是必須的</span>
</p>
<input type="submit" value="提交" ng-disabled="myForm.$invalid">
</form>
</body>
<script>
var app=angular.module("myApp",[]);
app.controller("person",function($scope){
$scope.submit=function(){
alert(JSON.stringify($scope.user));
}
});
</script>
示例代碼AngularJS_15.html
我們來分析以上代碼，與示例14做比較，首先我們為輸入框添加了name屬性，接下來在輸入框后跟着span標簽，當輸入驗證不通過時顯示相應的信息，span標簽的顯隱由指令ng-show來控制，而其值是取決於$error的不同狀態，如當用戶名輸入框中輸入的字符長度小於4位時，則“myForm.name.$error.minlength”的值為true，因此相應的span便顯示，提示用戶錯誤信息。
該系列的示例代碼
https://github.com/panyongwow/angularJS