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.

 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
o16
In this example,
ng-app –It defines the AngularJS application.
ng-model – Connect the values of application data to HTML input controls.
ng-controller – 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.

Recommended Videos

Course Schedule

Name Date
Website Development Architect 2020-12-05 2020-12-06
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-12-12 2020-12-13
(Sat-Sun) Weekend batch
View Details
Website Development Architect 2020-12-19 2020-12-20
(Sat-Sun) Weekend batch
View Details

Leave a Reply

Your email address will not be published. Required fields are marked *