AngularJs Forms

Hi everyone in this blog I’m explaining about AngularJs forms.

Introduction:

AngularJs enriches form filling and validation, We can use ng-click to handle AngularJs click on a button and use $dirty and $invalid flags to do the validations in a seemless way. Use novalidate with a form declaration to disable any browser-specific validation. Forms controls make heavy use of angularjs events. Let’s have a quick look on the event first.

Events:

AngularJS provides multiple events which can be associated with the HTML controls. For example, ng-click is normally associated with the button. Following are supported events in Angular JS.

1. ng-click

2. ng-dbl-click

3. ng-mousedown

4. ng-mouseup

5. ng-mouseenter

6. ng-mouseleave

7. ng-mousemove

8. ng-mouseover

9. ng-keydown

10. ng-keyup

11. ng-keypress

12. ng-change

ng-click:

Reset data of a form using on-click directive of a button.

<inputname="firstname"type="text"ng-model="firstName"required>
<inputname="lastname"type="text"ng-model="lastName"required>
<inputname="email"type="email"ng-model="email"required>
<buttonng-click="reset()">Reset</button>
<script>
    function studentController($scope) {
        $scope.reset = function () {
            $scope.firstName = "Kamlakar";
            $scope.lastName = "Singh";
            $scope.email = "sample@sample.com";
        }
        $scope.reset();
    }
</script>

Validate data:

The following can be used to track error.

1. $dirty - states that value has been changed.

2. $invalid- states that value entered is invalid.

3. $error- states the exact error.

Example:

<html>
<head>
<title>Angular JS Forms</title>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<style>
table, th , td {
  border: 1pxsolidgrey;
  border-collapse: collapse;
  padding: 5px;
}
tabletr:nth-child(odd) {
  background-color: #f2f2f2;
}
tabletr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<divng-app="mainApp"ng-controller="studentController">
<formname="studentForm"novalidate>
<tableborder="0">
<tr><td>Enter first name:</td><td><inputname="firstname"type="text"ng-model="firstName"required>
   <spanstyle="color:red"ng-show="studentForm.firstname.$dirty && studentForm.firstname.$invalid">
      <spanng-show="studentForm.firstname.$error.required">First Name is required.</span>
   </span>
</td></tr>
<tr><td>Enter last name: </td><td><inputname="lastname"  type="text"ng-model="lastName"required>
   <spanstyle="color:red"ng-show="studentForm.lastname.$dirty && studentForm.lastname.$invalid">
      <spanng-show="studentForm.lastname.$error.required">Last Name is required.</span>
   </span>
</td></tr>
<tr><td>Email: </td><td><inputname="email"type="email"ng-model="email"length="100"required>
<spanstyle="color:red"ng-show="studentForm.email.$dirty && studentForm.email.$invalid">
      <spanng-show="studentForm.email.$error.required">Email is required.</span>
      <spanng-show="studentForm.email.$error.email">Invalid email address.</span>
   </span>
</td></tr>
<tr><td><buttonng-click="reset()">Reset</button></td><td><button
                ng-disabled="studentForm.firstname.$dirty && studentForm.firstname.$invalid ||
                                                  studentForm.lastname.$dirty && studentForm.lastname.$invalid ||
                                                  studentForm.email.$dirty && studentForm.email.$invalid"
                ng-click="submit()">Submit</button></td></tr>
</table>
</form>
</div>
<script>
    var mainApp = angular.module("mainApp", []);
 
    mainApp.controller('studentController', function ($scope) {
        $scope.reset = function () {
            $scope.firstName = "Kamlakar";
            $scope.lastName = "Singh";
            $scope.email = "sample@sample.com";
        }
        $scope.reset();
    });
</script>
</body>
</html>

Output:

When we have empty every field that time our form give some message like this

blog

AngularJs Forms

Introduction:

Events:

ng-click:

Validate data:

Example:

Output:

Anonymous User

Leave Comment

Comments

Liked By