AngularJS Form
AngularJS form is a collection of input controls.
HTML controls
The following HTML input elements are called HTML controls:
input element
select element
button element
textarea element
HTML Form
HTML forms usually exist at the same time as HTML controls.
AngularJS form instance
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
Application code:
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script></head><body><div ng-app="myApp" ng-controller="formCtrl"> <form novalidate> First Name:<br> <input type="text" ng-model="user.firstName"><br> Last Name:<br> <input type="text" ng-model="user.lastName"> <br><br> <button ng-click="reset()">RESET</button> </form> <p>form = {{user }}</p> <p>master = {{master}}</p></div><script>var app = angular.module('myApp', []);app.controller('formCtrl', function($scope) { $scope.master = {firstName:"John", lastName:"Doe"}; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset();});</script></body></html>Running results:
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
Note: The novalidate property is newly added in HTML5. Disabled default verification using browser.
Example analysis
The ng-app directive defines AngularJS applications.
The ng-controller directive defines the application controller.
The ng-model directive binds two input elements to the user object of the model.
The formCtrl function sets the initial value of the master object and defines the reset() method.
The reset() method sets the user object equal to the master object.
The ng-click directive calls the reset() method and is called when the button is clicked.
The novalidate property is not necessary in the application, but you need to use it in AngularJS forms for overriding standard HTML5 validation.
The above is a compilation of AngularJS form materials, and we will continue to add them later. I hope that students who can help with programming.