title: Angular - Template driven form - Email validation not happening
body: <p>I am making a simple template-driven form with 'Email Validation' in it (Not by Reactive Forms). So, required, minlength, maxlength are working fine. But, when I try email to be valid, its failing. Can someone help me out? </p>
  
  <p><strong>abc.component.html</strong></p>
  
  <pre><code>  &lt;form #customForm="ngForm" (ngSubmit)="alpha(customForm)"&gt;
  
      &lt;input type="text" name="firstName" ngModel #firstName ="ngModel" required minlength="3" maxlength="10"&gt;&lt;br/&gt;
  
      &lt;div *ngIf="firstName.touched"&gt;
        &lt;p *ngIf="firstName.errors?.required"&gt;First Name is Required!!!&lt;/p&gt;
        &lt;p *ngIf="firstName.errors?.minlength"&gt;First Name minimum 3 characters are required!!!&lt;/p&gt;
        &lt;p *ngIf="firstName.errors?.maxlength"&gt;First Name max length is 10!!!&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;input type="email" name="email" ngModel #email="ngModel" required&gt;&lt;br/&gt;
  
      &lt;div *ngIf="email.touched"&gt;
        &lt;p *ngIf="email.errors?.required"&gt;Email is a required field!&lt;/p&gt;
        &lt;p *ngIf="email.errors?.email"&gt;This is not a valid Email!!!&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;button type="submit" [disabled]="customForm.invalid"&gt;Submit&lt;/button&gt;
  
    &lt;/form&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>Note:</strong> Though required validation of email is taking place, but as the
    pattern or data entered is not correct, <strong><em>the 2nd validation</em></strong> in email
    validation div must give error.</p>
  </blockquote>
  
  <p><strong>Result:</strong> (Email valid and its pattern not automatically giving error)</p>
  
  <p><a href="https://i.stack.imgur.com/JAN9E.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JAN9E.png" alt="enter image description here"></a></p>