FALLSEM2020-21_ITE1002_ETH_VL2020210105027_Reference_Material_II_10-Sep-2020_Example_code_10th_Sept_ - <!DOCTYPE html> <html> <script

FALLSEM2020-21_ITE1002_ETH_VL2020210105027_Reference_Material_II_10-Sep-2020_Example_code_10th_Sept_

This preview shows page 1 - 6 out of 18 pages.

<!DOCTYPE html> <html> <script src = "" ></script> <body ng-app= "" > <p> Try writing in the input field: </p> <form name = "myForm" > MyInput: <input name = "myInput" ng-model= "myInput" required ><br> Email: <input type = "email" name = "myemail" ng-model= "myemail" required > </form> <p> The input's MyInput valid state is: </p> <h1> {{myForm.myInput.$untouched}} </h1> <p> The input's Email valid state is: </p> <h1> {{myForm.myemail.$valid}} </h1> </body> </html>
Image of page 1
<!DOCTYPE html> <html> <script src = "" ></script> <body ng-app= "" > <p> Try leaving the first input field blank: </p> <form name = "myForm" > <p> Name: <input name = "myName" ng-model= "myName" required > <span ng-show= "myForm.myName.$touched && myForm.myName.$invalid" > The name is required. </span> </p> <p> Address: <input name = "myAddress" ng-model= "myAddress" required > </p> </form> <p> We use the ng-show directive to only show the error message if the field has been touched AND is empty. </p> </body> </html>
Image of page 2
<!DOCTYPE html> <html> <script src = "" ></script> <style> form.ng-pristine { background-color:lightblue; } form.ng-dirty { background-color:pink; } </style> <body ng-app= "" > <form name = "myForm" > <p> Try writing in the input field: </p> <input name = "myName" ng-model= "myName" required > <p> The form gets a "ng-dirty" class when the form has been modified, and will therefore turn pink. </p> </form> </body> </html>
Image of page 3
<!DOCTYPE html> <html> <script src = "" ></script> <style> input.ng-invalid { background-color:pink; } input.ng-valid { background-color:lightgreen; } </style> <body ng-app= "" > <p> Try writing in the input field: </p> <form name = "myForm" > <input name = "myName" ng-model= "myName" required > </form> <p> The input field requires content, and will therefore become green when you write in it. </p> </body> </html>
Image of page 4
<!DOCTYPE html> <html> <script src = "" ></script> <body> <h2> Validation Example </h2> <form ng-app= "myApp" ng-controller= "validateCtrl" name = "myForm" novalidate > <p> Username: <br> <input type = "text" name = "user" ng-model= "user" required > <span style = "color:red" ng-show= "myForm.user.$dirty && myForm.user.$invalid" > <span ng-show= "myForm.user.$error.required" > Username is required. </span> </span> </p> <p> Email: <br> <input type = "email" name = "email" ng-model= "email" required > <span style = "color:red" ng-show= "myForm.email.$dirty && myForm.email.$invalid" > <span ng-show= "myForm.email.$error.required" > Email is required. </span> <span ng-show= "myForm.email.$error.email" > Invalid email address. </span> </span> </p> <p> <input type = "submit" ng-disabled= "myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid" > </p> </form> <script> var app = angular.module ( 'myApp' , []); app.controller
Image of page 5
Image of page 6

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture

  • Left Quote Icon

    Student Picture