Using ngModel in Angular2 Reply

Rick HerrmannAngular 2 was finally released last week.  I was able to spend some time getting familiar with the new Framework since RC4 and was working on several small projects to help with learning.  As I continue to get a more in-depth understanding of Angular 2 I’ll be blogging on interesting things that are new and/or different from Angular 1.  The first thing I’d like to go over is Angular 2 forms – specifically the use of ngModel.

There are three ways to use ngModel in Angular 2:

  1. With 2-way binding (similar to Angular 1)
  2. With 1-way binding
  3. With no direct binding to a model

2 Way Binding

If you have used Angular 1 before, then the 2-way binding functionality will already be familiar.  The Angular 2 template syntax is different than Angular 1, but in the case of 2-way binding the functionality is the same.  Let’s look at an example.  Here we have three form fields that are bound to properties on a person model.  In the component we initialize the person properties to be empty.  The 2-way binding syntax is to wrap ngModel in [(ngModel)].  When the page loads then the form fields are empty, but as we type in the fields you can see from the json below the form that the bound person object reflects the form values.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  person = {
    firstName: '',
    lastName: '',
    title: ''
  };
}

 

2016-09-22_1-08-30

 

2016-09-22_1-00-05

 

1 Directional Data Binding

In some cases we may only want to initialize the form fields with values from a model, but not  bind the form back to the model. In this scenario the template syntax is to use [ngModel]. Let’s see how this works.

The person model is initialized with first and last name values, but no title.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  person = {
    firstName: 'Homer',
    lastName: 'Simpson',
    title: ''
  };
}

In the html, the form fields are set to 1-way binding:

2016-09-22_1-22-15

When the page displays, the form has the initial values:

2016-09-22_1-19-24

 

But after typing in a title, we can see that the person-json does NOT include the updated title property:

2016-09-22_1-24-20

 

ngModel With No Data Binding

There may be instances where you don’t need to bind the form to the a model at all, but would still like to use the Angular 2 validation features.  To do this, we just use ngModel without setting it to a model property.

For example:

2016-09-22_1-33-46

To illustrate that the initial model values are not set in the form fields, I put values in the person object:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  person = {
    firstName: 'Homer',
    lastName: 'Simpson',
    title: 'Safety Inspector'
  };
}

 

but the person properties are not set on the form fields:

2016-09-22_1-36-35

Subsequent changes to the form field values are also not reflected in the person model:

2016-09-22_1-38-25

You may be wondering, “Why you would bother using ngModel with no data binding?” Well, with the ngModel directive on the form field, Angular 2 form validation still works.  So we can still check for things like required fields, min/max lengths, or more complex patterns with reg-ex patterns.  Since the form fields are not bound to a model, you can access the values by setting a template variable on the form and using the @ViewChild decorator.

For example:

2016-09-22_17-09-45

From the component, the blogForm template variable can be accessed with this:

2016-09-22_17-18-40

2016-09-22_17-19-37

This third case is probably less common, but illustrates that the form values are still available even with no data binding.

 

We will look at the different validation options in a future post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s