<!DOCTYPE html>
<html ng-app="notesApp">
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=utf-8"/>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<title>ng-model</title>
<meta charset="utf-8"
/>
</head>
<body ng-controller="MainCtrl
as ctrl">
<!--ng-model提供雙向綁定-->
<input
type="text"
ng-model="ctrl.usrname"/>
<input
type="password"
ng-model="ctrl.password"/>
<!--ng-click模擬提交表單給伺服器-->
<button
ng-click="ctrl.submit1()">Submit</button>
<br
/><br />
<!--ng-submit提供多種方式提交表單：點擊按鈕、Enter鍵。-->
<form
ng-submit="ctrl.submit2()"
name="myForm">
<!--雖然沒有宣告ctrl.user這個物件，但若使用mg-modle，
在使用者輸入資料，AngularJS將會自動建立此物件的實體化-->
<!--表單驗證：必填欄位required、最大長度mg-maxlength、最小長度minlength-->
<input type="text"
name="uname"
ng-model="ctrl.user.usrname"
required
ng-maxlength="4"
/>
<input type="password"
name="pwd"
ng-model="ctrl.user.password"
required
ng-minlength="6"
/>
<!--ng-disabled利用表單目前的狀態(表單驗證結果)來判斷此按鈕是否被禁用。-->
<input type="submit"
value="Submit"
ng-disabled="myForm.$invalid"/>
<!--表單狀態
$invalid：表單驗證有誤時為true
$valid：表單驗證皆正確時為true
$pristine：指出使用者尚未開始輸入或修改表單內的元素時為true
$dirty：指出使用者已經開始輸入或修改表單內的元素時為true
$error：指出驗證是否通過，如myForm.uname.$error.required、myForm.pwd.$error.minlength
-->
</form>
<script
type="text/javascript">
angular.module('notesApp',
[])
.controller('MainCtrl',
[function
() {
var
self = this;
self.submit1 = function
() {
console.log('User clicked submit with', self.usrname, self.password);
};
self.submit2 = function
() {
console.log('User clicked submit with', self.user);
};
}]);
</script>
</body>
</html>
執行結果：
 |
| console物件列印出輸入結果 |
 |
| 若驗證不通過、則按鈕為disable狀態 |
沒有留言:
張貼留言