Two-way Data Binding in Angular 2 and JavaScript/ES5 - Creating a simple login form

Angular 2 has the different syntax for two way binding. AngularJS 2 is not the updated version of the AngularJS 1. It is completely rewrite framework. AngularJS 1 allows to create a applcation in a MVC pattern which has controllers, views and services etc. AngularJS 2 is the component based, means the whole application is a component which contains another set of components with the strong routing.

Angular 2 recommends the use of Microsoft’s Typescript language. However you can use Angular 2 with the JavaScript too. In the below I will show you a example of the basic login form which uses concept of the two way binding.

In AngularJS, one way binding can be achieve by using the square bracket with HTML attribute such as:

<input [placeholder] = "namePlaceholder" >

Above, whenever ‘namePlaceholder’ changes Angular will update the placeholder of the input field.

And for the two-way binding you need to add ngModel directive with both parentheses and square brackets, for example:

<input [(ngModel)] = "user.userName" >

You will see the complete implementation of the ‘ngModel’ in the below example. Most of the time, two-way binding is important with forms where we often needed to synchronize values of the form fields with the their model. Once user input the value in the field, the value of the corresponding property of the model object will be synchronized which can be access easily.

In the below We have a simple login form with the user name and password fields. The example will show how can you access the username and password values on the form submit event to validate the values. The example uses one way binding for showing the placeholders for the user name and password fields.

function userService() {}
userService.prototype.checkLogin = function(user) {
  //  alert(user.userName);
  //  Write your logic
};
 
var Cmp = ng.core.
Component({
  selector: 'cmp',
  providers: [userService],
  template: '<form id="form1">' +
    '<h1>Login</h1>' +
    '<div><label> User Name: </label>' +
    '<input [(ngModel)] = "user.userName" required ' +
          '[placeholder] = "namePlaceholder"></div>' +
    '<div><label> Password: </label>' +
    '<input [(ngModel)] = "user.password" required ' +
           '[placeholder] = "passwordPlaceholder"></div>' +
    '<input type="submit" value="OK" (click)="login()"> ' +
    '</form>'
}).
Class({
  constructor: [userService, function Cmp(service) {
    this.namePlaceholder = "Please enter the user name";
    this.passwordPlaceholder = "Enter the password";
    this.user = {
      userName: "",
      password: ""
    };
    this.login = function()
    {
       service.checkLogin(this.user);
    };
  }]
});
 
document.addEventListener('DOMContentLoaded', function() {
  ng.platform.browser.bootstrap(Cmp);
});

The output of the component:

Login form using two way binding angular 2 — Login form using two way binding Angular 2

Template can be a separate HTML file. See the (click)=”login()”, this is way of the event binding in Angular 2. A click event on the button will invoke the login() function.

And now finally HTML code to show the login form:

<body>
    <cmp></cmp>
 </body>

you can see this running code and can try it online on Plunker at Try Your self