AngularJS form
May 08, 2021 AngularJS
Table of contents
AngularJS form
The 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 typically exist at the same time as HTML controls.
An instance of an AngularJS form
function ExampleController($scope) { $scope.master = {"firstName":"John","lastName":"Doe"}; $ scope.reset = function() { $scope.user = angular.copy($scope.master); } ; $ scope.reset(); } ;
Last Name:
form = {{user}}
master = {{master}}
The application code
<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>
function formController ($scope) {
$scope.master = {firstName: "John", lastName: "Doe"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
};
</script>
Try it out . . .
|
The HTML property novalidate is used to disable the browser's default authentication. |
|---|
Instance resolution
The AngularJS ng-model instruction is used to bind input elements into the model.
The value of the model object master is "firstName": "John", "lastName": "Doe".
The model function reset sets the model object user equal to master.