AngularJs Forms

Posted on

         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

Java vs Javascript

Posted on

java vs javascript

Java vs Javascript – which one is better

Both Java and Javascript are two strong languages, which are often considered as distant cousins by programmers and developers who are new to programming and web development. It has always been a part of debate that out of these which one is better than another. And, an accurate answer could not be found because both Java and Javascript are best in their own worlds despite the fact both can be used for the same purpose, for example, in creation of websites.

There are several similarities in both while there are many differences as well. For example,

  • Both are Object Oriented Programming languages. Java is a programming language while JavaScript is a scripting language.
  • While programing structures are similar in both, JavaScript becomes a winner among average programmers because it has much smaller and simpler commands than Java.
  • Both can be used to create similar programs and generate same results on the web but the amount of work required is less in JavaScript than Java.
  • Java has Applets, which make it standalone but JavaScript has to be used within an html page to function, which means it is not standalone, but its execution is fast.
  • Java is a winner in mobile devices, apps, and at many places that do not even require interference of a webpage but JavaScript needs a webpage running on a browser that can interpret JavaScript.

As you see both have their own distinct features while having some similarities, now a days, JavaScript is taking over Java when it comes to Web.

Let us see the advantages of JavaScript:

  • One of the main advantage of JavaScript is it is easy to understand, and even a newbie  programmer / developer can easily get hold on its commands’ set while Java is not that easy to understand.
  • With JavaScript, one can easily create web page events using its event handlers, which can be used along with existing HTML code.
  • Both Java and JavaScript are used to create interactive webpages by setting up an interaction between the user and the web but both works differently. Java is rigid while JavaScript offers more freedom per object creation and execution.
  • The code you write using JavaScript works for both Server and the browser making it easier for you to migrate it from one to another. For example, you have developed code for the browser but there is a requirement to move that on the server arises; you can easily do it, and there are maximum chances that the same JavaScript code will work in the browser and on the server. However, in case of Java, you will have to write two different codes.
  • JavaScript is the need of an hour for modern websites including banking websites, e-commerce websites, and so on. And, this is the reason, all modern browser support JavaScript – be it on a PC or a mobile phone. JavaScript is a winner on the Web.
  • JavaScript has JSON, which many web services and databases use to return data, but in case of Java, there are libraries used as JSON parser adding extra weightage to the code’s execution.

Here you see, both have their own advantages, but on the web, in terms of simplicity, speed, and functionalities, JavaScript is a winner.

MySQL vs MongoDB

Posted on

TallerConcepts MongoDB MySQL

MySQL vs MongoDB what is the difference?

MySQL is a well-known open-source relational database administration, management system (RDBMS) that is produced, appropriated and supported by Oracle Corporation. Like other databases, MySQL stores information in tables and uses organized inquiry dialect (SQL) for database access. In MySQL, you pre-characterize your database construction taking into account your prerequisites and set up standards to represent the connections between fields in your tables and whereas MongoDB is an open-source database created by MongoDB, Inc. MongoDB stores information in JSON-like records that can shift in structure. Related data is put away together for quick inquiry access through the MongoDB question dialect. MongoDB utilizes dynamic diagrams, implying that you can make records without first characterizing the structure, for example, the fields or the sorts of their qualities. You can change the structure of records (which we call reports) just by including new fields or erasing existing ones.

Associations of all sizes are receiving MongoDB in light of the fact that it empowers them to manufacture applications speedier, handle exceptionally different information sorts and oversee applications all the more proficiently at scale. Improvement is disentangled as MongoDB archives outline to current, article situated programming dialects. Utilizing MongoDB uproots the mind-boggling article social mapping (ORM) layer that makes an interpretation of items in code to social tables.

MongoDB’s adaptable information display additionally implies that your database mapping can develop with business prerequisites. For instance, the ALTER TABLE summon required to include a solitary, new field to Craigslist’s MySQL database would take months to execute. The Craigslist group moved to MongoDB in light of the fact that it can suit changes to the information model without such exorbitant pattern relocations.

MongoDB can likewise be scaled inside and over different appropriated server farms, giving new levels of accessibility and versatility beforehand unachievable with social databases like MySQL. As your organizations develop as far as information volume and throughput, MongoDB scales effortlessly with no downtime, and without changing your application. Interestingly, to accomplish scale with MySQL regularly requires critical, custom designing work.

The huge contrast in the middle of SQL and MongoDB’s inquiry dialect is that the last is not a solitary string “sentence.” It doesn’t require white spaces in the middle of words, or commas, or enclosures, or cited characters. Rather, MongoDB utilizes a “course” of administrator/operand structures, normally in the name: value sets. As it were, the operand in one structure can be another administrator/operand structure. This makes things extremely energizing for engineers in light of the fact that the same strategies we use in our code to control rich states of information going into and leaving MongoDB – whether it’s Java, Python, JavaScript, and so forth – can be utilized to develop, control, and “parse” our question expressions. Truth be told, no parser is essential. It is unimportant simple to walk the course with standard programming methods and discover fields, values, and so on. Since the inquiry expression is an organized course and not a solitary string, this likewise implies it is anything but difficult to incrementally add sub-expressions to the question without first breaking it separated into segment pieces.