AngularJS Framework : Forms
An AngularJS form is a collection of input controls. HTML has the following controls:
- input elements
- select elements
- button elements
- textarea elements
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="formController">
<form novalidate>
First Name: <input type="text" ng-model="user.firstName"><br>
Last Name: <input type="text" ng-model="user.lastName">
<br><br>
<button ng-click="reset()">Reset</button>
</form>
<p>form = {{user }}</p>
<p>original = {{original}}</p>
</div>
<script>
var app = angular.module("mainApp", []);
app.controller("formController", function($scope) {
$scope.original = {firstName:"Fyodor", lastName:"Dostoyevsky"};
$scope.reset = function() {
$scope.user = angular.copy($scope.original);
};
$scope.reset();
});
</script>
</body>
</html>
The ng-app directive defines the AngularJS application, and the ng-controller directive defines the application controller while the ng-model directive binds two input elements to the user object in the model.
The formController() function sets initial values to the 'original' object, and invokes the reset() method which sets the 'user' object equal to the 'original' object.
The ng-click directive invokes the reset() method when the button is clicked.
The novalidate attribute is not needed for this application, but normally we will use it in AngularJS forms, to override standard HTML5 validation.
AngularJS
Ph.D. / Golden Gate Ave, San Francisco / Seoul National Univ / Carnegie Mellon / UC Berkeley / DevOps / Deep Learning / Visualization
My YouTube channel