AngularJS Form
AngularJS form is a collection of input controls.
HTML controls
The following HTML input elements are called HTML controls:
inputelement
selectelement
buttonelement
textareaelement
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="/libs//1.4.6/"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
<form novalidate>
First Name:<br>
<input type="text" ng-model=""><br>
Last Name:<br>
<input type="text" ng-model="">
<br><br>
<button ng-click="reset()">RESET</button>
</form>
<p>form = {{user }}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = ('myApp', []);
('formCtrl', function($scope) {
$ = {firstName:"John", lastName:"Doe"};
$ = function() {
$ = ($);
};
$();
});
</script>
</body>
</html>
Running results:
First Name:
Last Name:
form = {"firstName":"John","lastName":"Doe"}
master = {"firstName":"John","lastName":"Doe"}
Notice:The novalidate attribute is newly added in HTML5. Disabled default verification using browser.
Example analysis
ng-app Directives define AngularJS applications.
ng-controller The instruction defines the application controller.
ng-model The directive binds two input elements to the user object of the model.
formCtrlThe function sets the initial value of the master object and defines the reset() method.
reset() The method sets the user object equal to the master object.
ng-click The instruction 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.