title: EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'touched' of null
body: <p>I am trying to use Reactive forms in my Angular2 application but I am running into an exception as below</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): TypeError: Cannot read property
    'touched' of null TypeError: Cannot read property 'touched' of null</p>
  </blockquote>
  
  <p>My sample code is as below</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { NgForm } from '@angular/forms';
  import {FormGroup, FormControl} from '@angular/forms';
  import { Customer } from './customer';
  
  @Component({
  moduleId:module.id,
  templateUrl: 'sign-up.reactiveForms.html'
  })
  
  export class SignupComponent  {
  
  customer: Customer= new Customer();
  
  
  customerForm : FormGroup; //it assosciate html element with this root model
  
  ngOnInit() : void {
  
  
     this.customerForm=new FormGroup({
  
          firstName: new FormControl(),
           lastName: new FormControl(),
           email: new FormControl(),
           sendCatalog: new FormControl(true)
  
     });
  }
  
  save() {
      console.log(this.customerForm);
    }
  
  }
  </code></pre>
  
  <p>sign-up.reactiveForms.html file is as below</p>
  
  <p>
           
            
              </p>
  
  <pre><code>            &lt;!-- First Name input --&gt;
  
              &lt;div class="form-group"
                  [ngClass]="{'has-error': (customerForm.get('firstName').touched ||customerForm.get('firstName').dirty) &amp;&amp; !customerForm.get('firstName').valid }"&gt;
                  &lt;label class="col-md-2 control-label" 
                         for="firstNameId"&gt;First Name&lt;/label&gt;
  
                  &lt;div class="col-md-8"&gt;
                      &lt;input class="form-control" 
                             id="firstNameId" 
                             type="text" 
                             placeholder="First Name (required)" 
                             required 
                             minlength="3"
                             formControlName="firstName"
                               /&gt;
                      &lt;span class="help-block" *ngIf="(customerForm.get('firstName').touched || customerForm.get('firstName').dirty) &amp;&amp; customerForm.get('firstName').errors"&gt;
                          &lt;span *ngIf="customerForm.get('firstName').errors.required"&gt;
                              Please enter your first name.
                          &lt;/span&gt;
                          &lt;span *ngIf="customerForm.get('firstName').errors.minlength"&gt;
                              The first name must be longer than 3 characters.
                          &lt;/span&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I am trying to figure it out why touched property is null.</p>