AngularJs Forms

         AngularJs Forms – creation, submission and validation

Tallerconcepts & Angularjs

Introduction:

The developers were already submitting and validating forms before AngularJS came out in the market. There are a number of ways available to submit a form and lots of ways to validate it as well. AngularJS has always strived to offer tools to manipulate form in an easier way. A form can be easily validated and submitted using Ajax forms and AngularJS built-in validation functionalities. There are also third-party modules available to help developers to deal with forms such as angular-formly. In this article, we’ll explain the complete walkthrough of creating, validating and submitting a form in AngularJs.

Form and controls provide validation services for end users so that they can be notified of invalid input before submitting a form. It offers a better user experience than server side validation as the user gets instant feedback on how to correct input errors. Keep in mind that, the server side validation is more secure than client side validation.

These are the steps developers should follow to deal with AngularJs forms:

Create a form: In this section, we’ll understand how we can create a form in AngularJS and set their different properties as well. The form creation in Angular is similar to any other language and can have all the existing form input types. The example below has an input type inside a form in which end users provide their values.

<form name=”formExample” role=”form” novalidate>

<div class=”form-group” >

<label>Username</label>

<input name=”username” type=”text” maxLength=10 class=”form-control” data-ng-model=”formData.username” id=”username” placeholder=”Username” required>

</div>

</form>

In this example, we are using a single text box type input for the username. The ng-model property is used to display data fetched from the backend.

Validate form: AngularJS offers some basic implementation for all input types such as text, number, email, date, URL, checkbox and radio buttons, as well as some directives for a variety of validations such as pattern, minlength, maxlength, required, min and max etc.

 

<div class=”form-group” ng-class=”{ ‘has-error’ : submitted && formExample.username.$invalid }”>

<label>Username</label>

<input name=”username” type=”text” ng-minlength=”3″ ng-maxlength=”8″ class=”form-control” data-ng-model=”formData.username” id=”username” placeholder=”Username” required>

<div ng-show=”submitted && formExample.username.$invalid” class=”help-block”>

<p ng-show=”formExample.username.$error.required”>Username is required</p>

<p ng-show=”formExample.username.$error.minlength” class=”help-block”>Username is too short.</p>

<p ng-show=”formExample.username.$error.maxlength” class=”help-block”>Username is too long.</p>

</div>

</div>

In the above example, the same form field is validated for minimum and maximum length for username field.

 

  1. Form submission: In AngularJS, you can submit a form in two different ways –
  1. Using ng-submit attribute on the form element and
  2. Using a button element with ng-click attribute

In both the above submission methods, a JavaScript function is invoked on the $scope object. The developers can attach this JavaScript function to the $scope object in your controller. The data from your form element must be sent to your server through AJAX.

 

$http.post(‘/form’,$scope.formData).

then(function(response) {

//success response

$scope.submittedData.push(response.data)

$scope.formData = {};

$scope.submitted = false;

alert(“The form was posted to the httpBackend”)

}, function(response) {

//error response

});

The alternate way to submit a form to the server is using resource property of AngularJs. An example of such submission will be as follows:

 

var Forms = $resource(‘/form’);

Forms.save($scope.formData, function(data){

$scope.submittedData.push(data)

$scope.formData = {};

$scope.submitted = false;

alert(“The form was posted to the httpBackend”)

});
Conclusion: So this is a simple way to create, validate and submit a form in AngularJs. The library is dedicated to simplifying the handling of forms for developers as much as possible. There are some third party libraries also available that can be used for handling form for your application. The validation at the front end is not as secure as backend validation as it can be compromised in user’s system using few lines of codes.

 

For more content checkout the Repo

Leave a Reply

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