一、查看$scope -->尋找Form控制變量的位置
Form控制變量 格式：form的name屬性.input的name屬性.$...
- formName.inputField.$pristine 字段是否
未更改 - formName.inputField.$dirty 字段是否
更改 - formName.inputField.$valid 字段
有效 - formName.inputField.$invalid 字段
無效 - formName.inputField.$error 字段
錯誤信息
問題
為什么要按照上面的格式寫才能找到對應的變量從而正確表達字段的一些驗證信息呢？我們通過下面程序調試。
調試過程
html
<div ng-app="AppKe" >
<div ng-controller="OuterController">
<form novalidate name="formKe" >
<input type="text" name="userName" value="" ng-model="user.name" />
</form>
</div>
</div>
javasript
angular.module('AppKe', [])
.controller('OuterController', function($scope){
$scope.user = {
name: '李可'
}
console.log($scope);
})
結果 Gif 時間：30s
結論
從上圖中，我們清楚地了解到：這幾個控制變量在哪里了吧。這個確實有點考驗我了~剛開始研究。
解釋
form具有這些變量，form內的元素也繼承這些。（個人理解）。$scope當前控制器的最高的作用域。
二、表單中特定的input屬性
form：有個name屬性 novalidate 去除h5自帶的驗證
name 名字
ng-model 綁定的數據
ng-required 是否必填 注意和required區別
ng-minlength ng-maxlength 最小、最大長度
ng-pattern 匹配模式
email
url
number
ng-change 值變化的回調
三、表單中特定的CSS 類選擇器，下文中沒用，用了bootstrap樣式
ng-valid //有效時的類樣式名字.
ng-invalid //無效時的類樣式名字.
ng-pristine //未更改的類樣式名字.
ng-dirty //更改的類樣式名字.
ng-submitted //提交后的類樣式名字.
這個可以在官網查到：https://code.angularjs.org/1.3.0/docs/api/ng/directive/form
四、進入完成的一個表單
資源
- css地址
http://v3.bootcss.com/css/#forms
form提交驗證。只會驗證表單元素的required屬性。其余不驗證。
required和ngrequired相反。required頁面加載的時候就自動驗證=true。
html
<div ng-app="AppKe" style="margin-top:50px;">
<div ng-controller="OuterController">
<form novalidate name="formKe" class="form-horizontal container">
<div class="form-group" ng-class="{'has-error':formKe.userName.$invalid}">
<label for="userIDTxt" class="control-label col-sm-2 ">用戶名</label>
<div class="col-sm-10">
<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用戶名" ng-minlength="2" ng-maxlength="10" ng-required="true" ng-model="user.name"/>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.minlength">用戶名最小長度2</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$error.maxlength" >用戶名最大長度10</div>
{{formKe.userName.$error}}
</div>
</div>
</form>
</div>
</div>
javascript
angular.module('AppKe', [])
.controller('OuterController', function($scope){
})
結果
分析
頁面剛加載好，不應該haserror類樣式名：
- 對應的
ng-class="{'has-error':formKe.userName.$invalid}"表示：冒號后面的表達式為真的時候，元素才具有has-error類樣式- 寫法注意：注意寫成
json對象的格式，類樣式名要單引號 - 應該是表單元素有驗證沒通過，並且該元素更改過才會觸發。
ng-class="{'has-error':myForm.username.$dirty && myForm.username.$invalid}"
- 寫法注意：注意寫成
- 有最大最小值，不用
ng-required="true"
完整表單
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="ddd/angular.js"></script>
<script type="text/javascript" src="formKe.js"></script>
<link rel="stylesheet" type="text/css" href="framework/bootstrap/css/bootstrap.css"></link>
</head>
<body>
<div ng-app="AppKe" style="margin-top:50px;">
<div ng-controller="OuterController">
<!--這些提示的信息首次加載的時候，minlength- maxlength - email都為false-->
<form name="formKe" novalidate class="form-horizontal container">
<div class="form-group" ng-class="{'has-error':formKe.userName.$dirty && formKe.userName.$invalid}">
<label for="userIDTxt" class="control-label col-sm-2 ">*用戶名</label>
<div class="col-sm-10">
<input type="text" name="userName" class="form-control" id="userIDTxt" placeholder="用戶名" ng-minlength="2" ng-maxlength="10" ng-model="user.name" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.required">必填項</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.minlength">用戶名最小長度2</div>
<div class="alert alert-danger help-block" ng-show="formKe.userName.$dirty&&formKe.userName.$error.maxlength" >用戶名最大長度10</div>
錯誤$error：{{formKe.userName.$error}}++改動過$dirty：{{formKe.userName.$dirty}} ++驗證沒通過$invalid：{{formKe.userName.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty && formKe.userPwd.$error.minlength}">
<!--formKe.userName.$invalid代替formKe.userPwd.$error.minlength-->
<label for="userPwd" class="control-label col-sm-2 ">*密碼</label>
<div class="col-sm-10">
<input type="password" name="userPwd" class="form-control" id="userPwd" placeholder="密碼" ng-minlength="6" ng-model="user.userPwd" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userPwd.$dirty&&formKe.userPwd.$error.minlength">必填項，最小長度6</div>
錯誤$error：{{formKe.userPwd.$error}}++改動過$dirty：{{formKe.userPwd.$dirty}} ++驗證沒通過$invalid：{{formKe.userPwd.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userPwd.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm}">
<label for="pwdConfirm" class="control-label col-sm-2 ">*確認密碼</label>
<div class="col-sm-10">
<input type="password" name="pwdConfirm" class="form-control" id="pwdConfirm" placeholder="確認密碼" ng-model="user.pwdConfirm" required/>
<div class="alert alert-danger help-block" ng-show="formKe.pwdConfirm.$dirty&&formKe.pwdConfirm.$dirty&&user.userPwd!=user.pwdConfirm">密碼與確認密碼不一致</div>
錯誤$error：{{formKe.pwdConfirm.$error}}++改動過$dirty：{{formKe.pwdConfirm.$dirty}} ++驗證沒通過$invalid：{{formKe.pwdConfirm.$invalid}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userEmail.$dirty&&formKe.userEmail.$invalid}">
<label for="userEmail" class="control-label col-sm-2 ">郵箱</label>
<div class="col-sm-10">
<input type="email" name="userEmail" class="form-control" id="userEmail" placeholder="郵箱" ng-model="user.userEmail" ng-minlength="7" ng-maxlength="35"/>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.minlength">長度不得少於7位</div>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.maxlength">長度不得超過35位</div>
<div class="alert alert-danger help-block" ng-show="formKe.userEmail.$dirty&&formKe.userEmail.$error.email">格式不正確</div>
<!--type='email',也會在formKe.userEmail.$error生成$error.email-->
<!--formKe.userEmail.$error.pattern此處代替，但對應ng-pattern指令一定加上 ng-pattern="/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/"/，這樣依然生成$error.email，但一直未false，不造成影響-->
錯誤$error：{{formKe.userEmail.$error}}++改動過$dirty：{{formKe.userEmail.$dirty}} ++驗證沒通過$invalid：{{formKe.userEmail.$invalid}}++非郵箱：{{formKe.userEmail.$error.email}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userSite.$dirty&&formKe.userSite.$invalid}">
<label for="userSite" class="control-label col-sm-2 ">*個人網址</label>
<div class="col-sm-10">
<input type="url" name="userSite" class="form-control" id="userSite" placeholder="個人網址" ng-model="user.userSite" required/>
<div class="alert alert-danger help-block" ng-show="formKe.userSite.$dirty&&formKe.userSite.$error.url">格式不正確</div>
<!--required',也會在formKe.userEmail.$error生成$error.required，頁面首次加載，就為true，所以加上formKe.userSite.$dirty-->
<!--type='url',也會在formKe.userEmail.$error生成$error.url-->
錯誤$error：{{formKe.userSite.$error}}++改動過$dirty：{{formKe.userSite.$dirty}} ++驗證沒通過$invalid：{{formKe.userSite.$invalid}}++非網址{{formKe.userSite.$error.url}}++沒填寫{{formKe.userSite.$error.required}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userSite2.$dirty&&formKe.userSite2.$invalid}">
<label for="userSite2" class="control-label col-sm-2 ">個人網址2</label>
<div class="col-sm-10">
<input type="url" name="userSite2" class="form-control" id="userSite2" placeholder="個人網址2" ng-model="user.userSite2" ng-required/>
<div class="alert alert-danger help-block" ng-show="formKe.userSite2.$dirty&&formKe.userSite2.$error.url">格式不正確</div>
<!--ng-required',也會在formKe.userEmail.$error生成$error.required，頁面首次加載，就為false，所以不需要加上formKe.userSite2.$dirty-->
<!--type='url',也會在formKe.userEmail.$error生成$error.url-->
錯誤$error：{{formKe.userSite2.$error}}++改動過$dirty：{{formKe.userSite2.$dirty}} ++驗證沒通過$invalid：{{formKe.userSite2.$invalid}}++非網址{{formKe.userSite2.$error.url}}++沒填寫{{formKe.userSite2.$error.required}}（注意和上ng-required和required區別）
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.num.$dirty&&formKe.num.$invalid}">
<label for="num" class="control-label col-sm-2 ">數字包含e可以浮點</label>
<div class="col-sm-10">
<input type="number" name="num" class="form-control" id="num" placeholder="數字包含e" ng-model="user.num" ng-required /><!--min="1" max="99" 因為可以輸入e，最大值99便不會驗證-->
<div class="alert alert-danger help-block" ng-show="formKe.num.$dirty&&formKe.num.$error.number">必須數字</div>
<!--<div class="alert alert-danger help-block" ng-show="formKe.num.$error.min">不得小於0</div>
<div class="alert alert-danger help-block" ng-show="formKe.num.$error.max">不得超過99</div>
min和max,也會在$error.min和生成$error.max-->
錯誤$error：{{formKe.num.$error}}++改動過$dirty：{{formKe.num.$dirty}} ++驗證沒通過$invalid：{{formKe.num.$invalid}}+沒填寫{{formKe.num.$error.required}}
</div>
</div>
<div class="form-group" ng-class="{'has-error':formKe.userAge.$dirty&&formKe.userAge.$invalid}">
<label for="userAge" class="control-label col-sm-2 ">年齡</label>
<div class="col-sm-10">
<input type="text" name="userAge" class="form-control" id="userAge" placeholder="年齡" ng-model="user.userAge" ng-required ng-pattern="/^\d{1,2}$/"/>
<div class="alert alert-danger help-block" ng-show="formKe.userAge.$dirty&&formKe.userAge.$error.pattern">必須1-99的數字</div>
<!--min和max,也會在$error.min和生成$error.max-->
錯誤$error：{{formKe.userAge.$error}}++改動過$dirty：{{formKe.userAge.$dirty}} ++驗證沒通過$invalid：{{formKe.userAge.$invalid}}+沒填寫{{formKe.userAge.$error.required}}++非數字{{formKe.userAge.$error.number}}++非1-99數字{{formKe.userAge.$error.pattern}}
</div>
</div>
<div class="form-group" >
<label for="userSex" class="control-label col-sm-2 ">(無驗證)性別</label>
<div class="col-sm-10">
<label class="radio-inline">
<!-- 賦值-->
<input type="radio" name="inlineRadioOptions" ng-model="user.sex" value="" checked>男</label>
<label class="radio-inline">
<input type="radio"name="inlineRadioOptions" ng-model="user.sex" value="">女</label>
</div>
</div>
<div class="form-group" >
<label for="userSex" class="control-label col-sm-2 ">*喜歡1</label>
<div class="col-sm-10">
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.eat" >吃</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.drink">喝</label>
<label class="checkbox-inline">
<input type="checkbox" ng-model="user.likes.hitbean" >打豆豆</label>
</div>
</div>
<div class="form-group" >
<!-- 用指令生成-->
<label class="control-label col-sm-2 ">指令生成復選框雙向綁定喜歡2</label>
<div class="col-sm-10">
<label class="checkbox-inline" ng-repeat="item in hobbies">
<input type="checkbox" value="" ng-checked="user.hobbyIds.indexOf(item.id)!=-1" ng-click="toggleThis(item.id)">{{item.hobby}}》索引：{{user.hobbyIds.indexOf(item.id)}}</label>
</div>
</div>
<div class="form-group" >
<!-- 用指令生成-->
<label class="control-label col-sm-2 ">三級聯動</label>
<div class="col-sm-3">
<!--1，寫在select標簽上,無須option標簽-->
<!--2，ng-options和ng-repeator一樣循環。因為option有value (item.id)和(as)用戶看到的值(item.name ) for.-->
<!--3，要起一個ng-model指令，即使model層沒用到-->
<!--6，省改變時候，第三級別區縣隱藏:
省ng-change="county = false" ，縣ng-hide="!county"：本質改變ng-model的值，實時雙向綁定 -->
<select class="form-control" ng-change="county = false" ng-options= "item.id as item.name for item in address|cityfilter:0" ng-model="province"></select>
</div>
<div class="col-sm-3" >
<!--4，過濾參數是省的ng-model，代表Id ==>
item.id-->
<select class="form-control" ng-show="province" ng-options= "item.id as item.name for item in address|cityfilter:province" ng-model="district"></select>
<!--5，ng-show的設定 下面當province和district有值才顯示，值&&值之后變成bool？-->
</div>
<div class="col-sm-3">
<select class="form-control" ng-show="province&&district" ng-hide="!county" ng-options= "item.id as item.name for item in address|cityfilter:district" ng-model="county"></select>
</div>
<!--7，問題：展示一個人的固定的省市縣，后台知道查詢出了縣id，倒過來==>市==>省。：直接在控制器內寫方法--></div>
<div class="form-group" >
<div class="col-sm-2" ></div>
<div class="col-sm-10" >
<button type="submit" class="btn btn-primary" ng-disabled="formKe.$invalid||!user.likes||!(user.likes.eat||user.likes.drink||user.likes.hitbean)">Regieter</button>
沒通過：{{formKe.$invalid}}
錯誤：{{formKe.$error}}
愛好：{{user.likes===undefined?'無愛好':user.likes}}
<button type="reset" class="btn btn-primary" ng-click="resetForm(formKe)">Reset</button>
</div></div>
</form>
</div>
</div>
</body>
</html>
js
angular.module('AppKe', [])
.filter("cityfilter", function() {
//前台用法。會傳入一個
return function(data, parent) { //這兩個參數1，全部數據3分全部數據？ 2，parent傳的參數
//console.log(data, parent);
var finalArray = [];
angular.forEach(data, function(obj) {
//console.log(obj);//3份重復的數據
if (obj.parent == parent) {
finalArray.push(obj);
}
})
return finalArray;
}
})
.controller('OuterController', function($scope) {
/***************************************************1復選框**************************************************/
//1從數據庫查詢的所有選項，在前台全部列出
$scope.hobbies = [{
id: 1,
hobby: "吃豆子"
}, {
id: 2,
hobby: "喝豆汁"
}, {
id: 3,
hobby: "豆豆玩"
}, {
id: 4,
hobby: "打豆豆"
}, {
id: 5,
hobby: "打一天豆豆"
}];
/*2從當前用戶的選項id數組，在前台顯示出用戶的選中
$scope.user.hobbyIds=[3,5] 不行*/
$scope.user = {
hobbyIds: [3, 5, 2]
}
/*3,用戶點擊的時候:可能選中，可能沒選中
當view中沒選中，點擊選中時，model層($scope.user)要添加對應的喜好選項Id
當view中選中，點擊取消時，model層($scope.user)要刪除對應的喜好選項Id ，不要受到上面$scope.user的影響，刪除了就少了。*/
$scope.toggleThis = function(id) {
//假如這個用戶沒有喜好
var index = -1;
if (!$scope.user.hobbyIds) {
$scope.user.hobbyIds = [];
} else {
index = $scope.user.hobbyIds.indexOf(id);
}
console.log(index);
//如果有這個選項，表示已經選中了，下面做刪除的操作
if (index != -1) {
$scope.user.hobbyIds.splice(index, 1); //頁面雙向綁定，頁面會變化
} else {
$scope.user.hobbyIds.push(id); //頁面雙向綁定，頁面會變化
}
}
/*************************************************2三級聯動****************************************************/
//1,后台獲取數據庫數據，自動綁定到前台
$scope.address = [{
name: '上海',
parent: 0,
id: 1
}, {
name: '上海市',
parent: 1,
id: 2
}, {
name: '上海一區',
parent: 2,
id: 8
}, {
name: '上海二區',
parent: 2,
id: 3
}, {
name: '北京',
parent: 0,
id: 4
}, {
name: '北京市',
parent: 4,
id: 5
}, {
name: '北京一區',
parent: 5,
id: 6
}, {
name: '北京二區',
parent: 5,
id: 7
}, {
name: '山東',
parent: 0,
id: 9
}, {
name: '青島市',
parent: 9,
id: 100
}, {
name: '菏澤市',
parent: 9,
id: 11
}, {
name: '青島一區',
parent: 100,
id: 12
}, {
name: '菏澤一區',
parent: 11,
id: 13
}];
//2給省、市、縣、區寫過濾器
//省：把parentid不是0的過濾掉
//filter：對對象的某個字段過濾掉 不是精准過濾（只能找parentid=0或者某個值的），這次過濾的是parentid不是0的的
//這個時候，只能自定義過濾器 在上面cityfilter
//3省市區的選中
$scope.county=3;
//從后台查這個人在的區縣id是2---pid--》市id--pid--》省id
//寫一個普通方法，用this this的指向？ 有
this.searchParent = function(Id) {
var pId;
angular.forEach($scope.address, function(item) {
if ( item.id== Id) {
pId = item.parent;
console.log(pId);
return; //終止循環,跳出所有循環
}
})
return pId;
}
if ($scope.county != undefined) {
console.log($scope.county);
$scope.district = this.searchParent($scope.county);
console.log($scope.district);
$scope.province = this.searchParent($scope.district);
}
/***************************************************重置**************************************************************/
/*type=reset會將用戶輸入的清空，默認form的一些屬性，radio會默認選第一個。為第一個select會選第一個值
但是不能將綁定數據表單元素重新綁定上去 比如綁定的checkbox，select不能綁定*/
$scope.resetForm=function (formKe) {
console.log(formKe)
/*$setPristine 會將class,$dirty,$pristine恢復，但不是單$.error恢復*/
formKe.$setPristine();//所以在ng-show面加上....$dirty 重置到原來狀態的時候..$dirty就變成了false。
/*對checkbox處理*/
$scope.user = {
hobbyIds: [3, 5, 2]
}
}
})
截圖
草稿
1表單
input屬性
name 名字
ng-model 綁定的數據
ng-required 是否必填
ng-minlength ng-maxlength 最小、最大長度
ng-pattern 匹配模式
ng-change 值變化的回調
css樣式
表單驗證 非常全面
http://www.miaoyueyue.com/archives/607.html
博客園
http://www.cnblogs.com/rohelm/p/4033513.html
ng-show="expression"
ng-required
--注入的3中形式
構造者 --angular
geterseter
反射
function controller($scope){} 注入$window service等
undefined||true
true
undefined||false
false
undefined&&false
undefined
undefined&&true
undefined
!undefined
true