title: angular validation .error not defined
body: <p>I'm trying to use a template driven form and I can't seem to get the errors property to correctly work to validate the minlength as per the tutorial <a href="https://angular.io/guide/form-validation#simple-template-driven-forms" rel="nofollow noreferrer">Here</a>.  The error I'm getting on page load in the dev tools is:</p>
  
  <blockquote>
    <p>ContactFormComponent.html:8 ERROR TypeError: Cannot read property
    'minlength' of null</p>
  </blockquote>
  
  <p>So the problem is that there is no <code>.error</code> property on the ngModel.  I'm not sure if I've misinterpreted something or incorrectly set up the form.  Without the validation everything works as intended.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form (ngSubmit)="onSubmit()" #contactForm="ngForm"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="email"&gt;Email&lt;/label&gt;
          &lt;input minlength="6" maxlength="50" name="email" class="form-control" id="email" placeholder="Email" required email [(ngModel)]="contactForm.email" #email="ngModel"&gt;
          &lt;div *ngIf="email.dirty || email.touched" class="alert alert-danger"&gt;
              &lt;div [hidden]="!email.errors.minlength"&gt;
                  &lt;span&gt;Email is too short&lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>import { Component, Input } from '@angular/core';
  import { Contact } from './contact';
  import { AppService } from '../app.service';
  
  @Component({
    selector: 'selected-page',
    template: require('./contact-form.html'),
    providers: [AppService]
  })
  
  export class ContactFormComponent {
      contactForm = new Contact();
      submitted: boolean = false;
  
      constructor (private appService: AppService) {}
  
      onSubmit() {
          this.appService.emailContact(contactForm).then(data =&gt; {
              this.submitted = true;
          });
      }
  }
  </code></pre>
  
  <p>Module</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule, Routes }   from '@angular/router';
  import { FormsModule } from '@angular/forms';
  
  import { AppComponent }  from './app.component';
  import { ContactFormComponent } from './contact/contact-form.component';
  import { HttpModule } from '@angular/http';
  import { AppService } from './app.service';
  
  const appRoutes: Routes = [
      {
          path: 'contact',
          component: ContactFormComponent
      }
  ]
  
  @NgModule({
      imports: [
          BrowserModule,
          RouterModule.forRoot(appRoutes),
          FormsModule,
          HttpModule
      ],
      declarations: [ 
          AppComponent,
          ContactFormComponent,
      ],
      bootstrap: [ AppComponent ],
      providers: [ AppService ]
  })
  
  export class AppModule { }
  </code></pre>