What is AngularJS Forms?
A Form is a set of controls for the purpose of grouping related controls together that means it is a collection of input controls. Controls like input, select, textarea are the ways for a user to enter data. Form and controls give validation services so that the user can be informed of invalid input before submitting a form.
Watch this Full Stack Web Development Course video to learn more about its concepts:
Example
<!DOCTYPE html>
<html lang="en">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<form>
First Name:<br>
<input type="text" ng-model="user.Name"><br>
<button ng-click="reset()">Reset</button>
</form>
<p>user = {{user}}</p>
<p>master = {{master}}</p>
</div>
<script>
var app = angular.module('formApp', []);
app.controller('formCtrl', function($scope) {
$scope.master = {Name:"abc"};
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
};
$scope.reset();
});
</script>
</body>
</html>
Output
In this example,
ng-app –It defines the AngularJS application.
ng-model – Connect the values of application data to HTML input controls.
ng-controll
er – It defines the application controller.
formCtrl – This function puts initial values to the master object and describes the reset() method.
reset() – This method puts the user object equal to the master object.
ng-click – It calls the reset() method only if the button is clicked.
Attribute novalidate can also used with form to override HTML5 validation.
