title: ERROR TypeError: Cannot read property 'email' of null
body: <p>I am writing a form validation for email and for it it is giving following error - ERROR TypeError: Cannot read property 'email' of null.
  Following is the HTML code for Angular 5 Template driven form.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form name="form" #myForm="ngForm" (ngSubmit) = "onSubmit()"&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="firstName"&gt;First Name*&lt;/label&gt;
                        &lt;input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" #firstname="ngModel"   required minlength="6" /&gt;
                        &lt;div *ngIf="firstname.touched &amp;&amp; firstname.invalid"&gt;
                          &lt;div *ngIf="firstname.invalid &amp;&amp; firstname.errors.required" class="alert alert-danger"&gt;First name is mandatory&lt;/div&gt;
                          &lt;div *ngIf="firstname.invalid &amp;&amp; firstname.errors.minlength" class="alert alert-danger"&gt;First name must have minimum 6 characters&lt;/div&gt;
                      &lt;/div&gt;
  
                        &lt;div *ngIf="myForm.submitted &amp;&amp; firstname.invalid"&gt;
                            &lt;div *ngIf="firstname.invalid &amp;&amp; firstname.errors.required"&gt;First name is mandatory&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="lastName"&gt;Last Name&lt;/label&gt;
                        &lt;input type="text" class="form-control" name="lastName" [(ngModel)]="lastName"  #lastname="ngModel" required /&gt;
                        
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="email"&gt;Email&lt;/label&gt;
                        &lt;input type="email" class="form-control" name="myemail" [(ngModel)]="email" 
                        #myemail="ngModel" required myemail/&gt;
                        &lt;div *ngIf="myemail.touched"&gt;
                            &lt;div *ngIf="myemail.invalid &amp;&amp; myemail.errors?.required" class="alert alert-danger"&gt;Email is required&lt;/div&gt;
                          &lt;div *ngIf="myemail.errors.email &amp;&amp; !myemail.errors.required" class="alert alert-danger"&gt;Email is not valid&lt;/div&gt;
                          
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label for="selectcity"&gt;City&lt;/label&gt;
  
                      &lt;select name="city" class="form-control" [(ngModel)] = "cityvalue" required #cityselect = "ngModel"&gt;
                        &lt;option value="Pune"&gt;Pune&lt;/option&gt;
                        &lt;option value="Mumbai"&gt;Mumbai&lt;/option&gt;
                        &lt;option value="Delhi"&gt;Delhi&lt;/option&gt;
                        &lt;option value="Surat"&gt;Surat&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;div *ngIf="cityselect.touched &amp;&amp; cityselect.invalid"&gt;
                        &lt;div *ngIf="cityselect.invalid &amp;&amp; cityselect.errors.required" class="alert alert-danger"&gt;City name is mandatory&lt;/div&gt;
                        
                    &lt;/div&gt;
                  &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                        &lt;label for="password"&gt;Password&lt;/label&gt;
                        &lt;input type="password" class="form-control" name="password" [(ngModel)]="password" #mypassword="ngModel" minlength="6"/&gt;
                        
                    &lt;/div&gt;
                    &lt;div class="form-group"&gt;
                        &lt;button   class="btn btn-primary"&gt;Register&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Following is the code for email validation </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div class="form-group"&gt;
                        &lt;label for="email"&gt;Email&lt;/label&gt;
                        &lt;input type="email" class="form-control" name="myemail" [(ngModel)]="email" 
                        #myemail="ngModel" required myemail/&gt;
                        &lt;div *ngIf="myemail.touched"&gt;
                            &lt;div *ngIf="myemail.invalid &amp;&amp; myemail.errors?.required" class="alert alert-danger"&gt;Email is required&lt;/div&gt;
                          &lt;div *ngIf="myemail.errors.email &amp;&amp; !myemail.errors.required" class="alert alert-danger"&gt;Email is not valid&lt;/div&gt;
                          
                      &lt;/div&gt;
                    &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  If I use "myemail.errors?.email" It works fine but does not show message "Email is not valid".
  If I use "myemail.errors.email" it throws error shown above or in title.</p>
  
  <p>I tried to use the pattern "pattern="[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$" " It worked for email.</p>
  
  <p>Following is my question:
   <strong>Why in template driven form of angular email is null error thrown?
   And How can we solve it.</strong></p>