<!DOCTYPE html>
<html ng-app>
<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></title>
<meta charset="utf-8"
/>
</head>
<body>
<!--novalidate is
used to disable browser's native form validation.-->
<form
novalidate
name="myForm">
<input type="text"
name="uname"
ng-model="ctrl.user.usrname"
required=""
ng-maxlength="4"
placeholder="User
Name" />
<input type="password"
name="pwd"
ng-model="ctrl.user.password"
required=""
ng-minlength="6"
placeholder="Password" />
<br /><br
/>
<!--ng-form是一個群組的概念，帶有一個群組的狀態，此處透過myForm.profile.$invalid去存取該狀態-->
<ng-form name="profile">
<input type="text"
name="firstName"
ng-model="ctrl.user.profile.firstname"
required
placeholder="First
Name"/><br />
<input type="text"
name="middleName"
ng-model="ctrl.user.profile.middlename"
required
placeholder="Middle
Name"/><br />
<input type="text"
name="lastName"
ng-model="ctrl.user.profile.lastname"
required
placeholder="Last
Name" /><br
/>
<input type="date"
name="dob"
placeholder="Date
Of Birth" ng-model="ctrl.user.profile.dob"
/><br />
</ng-form>
<!--當ng-form name="profile"這個群組，在使用者輸入資料尚未驗證通過時，這行字會一直顯示在畫面上-->
<span ng-show="myForm.profile.$invalid">
Please fill out the profile
information
</span>
<br /><br
/>
<!--整張表單驗證通過後，才可以點此按鈕-->
<input type="submit"
value="submit"
ng-disabled="myForm.$invalid"
/>
</form>
</body>
</html>
執行結果：
 |
| 起始頁面 |
 |
| 輸入完profile驗證通過後，提醒字串隱藏 |
 |
| myForm驗證通過，submit按鈕enable |
沒有留言:
張貼留言