Angular can seamlessly enhance the functionality of standard form elements using directives, and we will discuss its advantages, including:
Data binding, model attribute creation, verification form, feedback information after verification form, form instruction attributes
Below we verify their usage through cases:
1. Bidirectional data binding (ng-model) and model property establishment
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"></head><body><!-- Case: Bidirectional Data Binding-><div ng-controller="defaultCtrl"> <!-- Filter items whose complete is false --> <h3>To Do List<span>{{(todos | filter : {complete : 'false'}).length}}</span></h3> <div> <div> <div> <label for="action">Action: </label> <!-- ng-model Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bidirectional Bi --> <!-- When one of the parties sends the replacement, the other also changes --> <input type="text" id="action" ng-model="newToDo.action"> </div> <div> <label for="location">Location: </label> <select id="location" ng-model="newToDo.location"> <option>Home</option> <option>Office</option> <option>Mall</option> </select> </div> <!-- ng-click Click Add to add the item--> <button ng-click="addNewItem(newToDo)">Add</button> </div> <div> <table> <thead> <tr><th>#</th><th>Action</th><th>Done</th></tr> </thead> <tbody> <tr ng-repeat="item in todos"> <!-- $index defaults to 0, increment--> <td>{{$index + 1}}</td> <td>{{item.action}}</td> <td> <input type="checkbox" ng-model="item.complete"/> </td> </tbody> </table> </div> </div></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">// define a module named exampleAppangular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { // Data model $scope.todos = [ { action : "play ball", complete : false }, { action : "singing", complete : false }, { action : "running", complete : true }, { action : "dance", complete : true }, { action : "swimming", complete : false }, { action : "eating", complete : false }, ]; // Add data to the model $scope.addNewItem = function (newItem) { // Determine if (angular.isDefined(newItem) && angular.isDefined(newItem.action) && angular.isDefined(newItem.location)) { $scope.todos.push({ action : newItem.action + " (" + newItem.location + ")", complete : false }) } } })</script></body></html>First, the data model scope.todos and the addNewItem() method to add data to the model are defined. Then, the action and location of the form in the view and scope.todos in the model are bound using two-way data binding ng−model.
Finally, the addNewItem() method of adding data to the model is triggered by clicking the attribute.
2. Verification form
Before we submit the form to the server, we need to check whether the data submitted by the user exists or is legal, otherwise submitting useless data will waste resources.
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style></head><body><div id="todoPanel" ng-controller="defaultCtrl"> <!-- novalidate means abandoning the form verification that comes with the browser and using NG's own verification --> <!-- ng-submit="addUser(newUser) When the form data is legal, submit the data to the model --> <form name="myForm" novalidate ng-submit="addUser(newUser)"> <div> <div> <label>Name:</label> <!-- required table This form is required-> <!-- ng-model="newUser.name" two-way data binding --> <input name="userName" type="text" required ng-model="newUser.name"> </div> <div> <label>Email:</label> <input name="userEmail" type="email"required ng-model="newUser.email"> </div> <div> <label> <input name="agreed" type="checkbox"ng-model="newUser.agreed" required> I agree to the terms and conditions </label> </div> <!-- g-disabled="myForm.$invalid" The submit button is not available when it is illegal to fill in any of the forms --> <button type="submit" ng-disabled="myForm.$invalid"> OK </button> </div> <div> Message: {{message}} <div> Valid: {{myForm.$valid}} </div> </form></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">angular.module("exampleApp", []) .controller("defaultCtrl", function ($scope) { // Add user data to model $scope.message $scope.addUser = function (userDetails) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } // Show the results before and after verification $scope.message = "Ready";});</script></body></html>First, the data model scope.message and addUser() method to add data to the model are defined. Then the form elements validate, name attribute and ng-submit attribute are added to the view. Then the two-way data binding ng-model binds the action and location of the form in the view and scope.todos in the model are bound, and the verification attributes are required and email forms are used.
Then, the submit button is disabled. It can only be used if all form data is legal. If it is illegal, it will be disabled (ng-disabled=”myForm.$invalid”)
Finally, the data is submitted to the addUser() method of the model is completed through the ng-submit attribute.
3. Form verification feedback information
It is far from enough for us to just verify the form, because the user is confused because he doesn't know why the error has happened. Therefore, we need to feedback the information to the user so that they can understand what to fill in
First introduce the classes to be verified in NG
The ng-pristine user has no interactive elements added to this class
ng-dirty The user interacts with elements are added to this class
ng-valid validation result valid elements are added to this class
ng-invalid The invalid element is added to this class
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> /*Interactive and required style*/ form.validate .ng-invalid-required.ng-dirty { background-color: orange; } /*Interaction is illegal style*/ form .ng-invalid.ng-dirty { background-color: lightpink; } /*Email is illegal and interacted with*/ form.validate .ng-invalid-email.ng-dirty { background-color: lightgoldenrodyellow; } div.error{ color: red; font-weight: bold; } div.summary.ng-valid{ color: green; font-weight: bold; } div.summary.ng-invalid{ color: red; font-weight: bold; } </style></head><body><!-- Case: Bidirectional data binding-><div ng-controller="defaultCtrl"> <!-- novalidate="novalidate" Just NG form verification--> <!-- ng-submit="addUser(newUser)" Add data to the model--> <!-- ng-class="showValidation ? 'validate' : '' When the verification is legal, showValidation is true, which triggers ng-class to validate --> <form name="myForm" novalidate="novalidate" ng-submit="addUser(newUser)" ng-class="showValidation ? 'validate' : ''"> <div> <div> <label>Email: </label> <input name="email" type="email" required="required" ng-model="newUser.email"> <!-- Verification prompt message--> <div> <!-- Show feedback information--> <span ng-class="error" ng-show="showValidation"> {{getError(myForm.email.$error)}} </span> </div> </div> <button type="submit" >OK</button> <div> Message : {{message}} <!-- When myForm.$valid validation is true, showValidation is true, which triggers ng-class to ng-valid. Otherwise, ng-invalid --> <div ng-class="myForm.$valid ? 'ng-valid' : 'ng-invalid'" > Valid : {{myForm.$valid}} </div> </form></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">// define a module named exampleAppangular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { // Add data to model $scope.addUser = function (userDetails) { if (myForm.$valid) { $scope.message = userDetails.name + " (" + userDetails.email + ") (" + userDetails.agreed + ")"; } else { $scope.showValidation = true; } } // Data model $scope.message = "Ready"; // Error feedback information// When no information is filled in, please enter a value // When there is an error in verification, please enter a valid email address $scope.getError = function (error) { if (angular.isDefined(error)) { if (error.required) { return "Please enter a value"; } else if (error.email) { return "Please enter a valid email address"; } } } } })</script></body></html>First, define the style of feedback information and the style of form verification in style
Then write the information feedback when the error is written in JS
Finally bind ng-class in the view
4. Form instruction properties
1. Use the input element
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style></head><body><div id="todoPanel" ng-controller="defaultCtrl"> <form name="myForm" novelidate="novalidate"> <div> <div> <label>Text: </label> <!-- ng-required="requireValue" required value through data binding --> <!-- ng-minlength="3" ng-maxlength="10" maximum and minimum characters allowed --> <!-- ng-pattern="matchPattern" Regular matching --> <input name="sample" ng-model="inputValue" ng-required="requireValue" ng-minlength="3" ng-maxlength="10" ng-pattern="matchPattern"> </div> </div> <div> <!-- Required --> <p>Required Error: {{myForm.sample.$error.required}}</p> <!-- Minimum maximum length --> <p>Min Length Error: {{myForm.sample.$error.minlength}}</p> <p>Max Length Error: {{myForm.sample.$error.maxlength}}</p> <!-- Match only lowercase letters --> <p>Pattern Error: {{myForm.sample.$error.pattern}}</p> <!-- Verify that legal --> <p>Element Valid: {{myForm.sample.$valid}}</p> </div> </form></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">// define a module named exampleAppangular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { $scope.requireValue = true; $scope.matchPattern = new RegExp("^[az]"); })</script></body></html>2. Select the list
<!DOCTYPE><!-- use module --><html ng-app="exampleApp"><head> <title>Angular Directive</title> <meta charset="utf-8"/> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"> <style> </style></head><body><div id="todoPanel" ng-controller="defaultCtrl"> <form name="myForm" novelidate="novalidate"> <div> <div> <label>Selection an action: </label> <!-- traversal list sorts item.id as item.action Change option value--> <!-- ng-options="item.id as item.action group by item.place for item in todos" --> <select ng-model="selectValue" ng-options="item.id as item.action group by item.place for item in todos"> <option value="">(Pick One)</option> </select> </div> <div> <p>Selected: {{selectValue || "None"}}</p> </div> </form></div><script type="text/javascript" src="js/angular.min.js"></script><script type="text/javascript">// define a module named exampleAppangular.module("exampleApp", []) // define a controller named defaultCtrl .controller('defaultCtrl', function ($scope) { // Model data $scope.todos = [ { id : 100, place : "School", action : "play ball", complete : false }, { id : 200, place : "Home", action : "eating", complete : false }, { id : 300, place : "Home", action : "watch TV", complete : true } ]; })</script></body></html>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.