1. Initialization
2. Input errors
3. Enter the correct
4. Code
4.1 demo.html
1 <!DOCTYPE HTML>2 <HTMLNg-app= "MYAPP">3 <Head>4 <Scriptsrc= "Js/angular.js"></Script>5 <Scriptsrc= "Demo.js"></Script>6 <Linkhref= "Demo.css"rel= "stylesheet"type= "Text/css"/>7 </Head>8 <Body>9 <DivNg-controller= "Mycontroller"Ng-init= "init ()">Ten <formname= "MyForm"Ng-submit= "Alertok ()"> One <Div> A <label for= "MyName">Name:</label> - <inputtype= "text"Ng-model= "Name"Required Ng-maxlength=20Ng-minlength=2name= "MyName"ID= "MyName"placeholder= "Please enter name"></P> - <Divng-if= "Myform.myname. $dirty && myform.myname. $error. Required"class= "ErrorInfo labelmargin">Name must be filled in</Div> the <Divng-if= "Myform.myname. $dirty && myform.myname. $error. MaxLength"class= "ErrorInfo labelmargin">Cannot exceed 20 characters</Div> - <Divng-if= "Myform.myname. $dirty && myform.myname. $error. MinLength"class= "ErrorInfo labelmargin">Minimum of two characters</Div> - </Div> - + <Div> - <label for= "MyPwd">Password:</label> + <inputtype= "Password"Ng-model= "pwd"Required Name= "MyPwd"ID= "MyPwd"placeholder= "Please enter password"Ng-pattern= "/^[a-z][\_\@\." ([a-za-z0-9]) {4,19}$/"></P> A <Divng-if= "myform.mypwd. $dirty && myform.mypwd. $error. Required"class= "ErrorInfo labelmargin">Password must be filled in</Div> at <Divng-if= "myform.mypwd. $dirty && myform.mypwd. $error. Pattern"class= "ErrorInfo labelmargin">The first character must be an uppercase letter, and the second character must be one of the ".", "_", and "@", leaving the case letters or numbers. A minimum of 6 characters, up to 20 characters.</Div> - </Div> - <inputtype= "Submit"ID= "Submitbtn"ng-disabled= "MyForm. $invalid"class= "Labelmargin"/> - </form> - </Div> - </Body> in </HTML>
4.2 Demo.js
1 /*2 * Auth:danny3 * date:2015-10-034 *5 *6 */7 8 angular.module (' myApp ', [])9 . Controller (' Mycontroller ', [' $scope ', function ($scope) {Ten One $scope. init = function () { A $scope. Name = ""; - }; - the $scope. Alertok = function () { - alert ("OK"); - }; - + $scope. Count = 0; - $scope. $watch (' name ', function () { + //if (newvalue = = = OldValue) console.log ("Same value") return; A $scope. count++; at Console.log ("Count:" + $scope. Count + "| | Time: "+ new Date ()); - }); -}]);
4.3 demo.css
. ErrorInfo{font-size:10px;Color:Red}Input.ng-invalid.ng-dirty{Border:1px solid Red;}label{float: Left;width:150px;text-align: Right;Padding-right:12px;Margin-top:12px;Clear: Left;}. Labelmargin{Margin-left:162px; }#myPwd{Margin-top:12px;}#myName{Margin-top:12px;}#submitbtn{Margin-top:12px;}
4.4 Angular.js Version 1.3.14
5. Reference Video
Angular form:https://www.youtube.com/watch?v=t6xupvmlyby
CSS From:https://www.youtube.com/watch?v=b8gsh6zmjpg
Angularjs Landing-form Test