title: Angular 8 mat-error not displaying error message
body: <p>I have borrowed the following code from one of my older projects in which it worked fine. But now it does not display any error message as I have used the same code in the new project.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;mat-card class="centered card"&gt;
  &lt;form [formGroup]="loginForm"&gt; 
      &lt;mat-form-field appearance='outline'&gt;
          &lt;mat-label&gt;Email&lt;/mat-label&gt;
          &lt;input matInput fromControlName="email" type="email" placeholder="Email"/&gt;
          &lt;mat-error&gt;
              &lt;div *ngIf="loginForm.get('email').hasError('pattern')"&gt;Enter valid Email ID&lt;/div&gt;
              &lt;div *ngIf="loginForm.get('email').hasError('required')"&gt;Email is required&lt;/div&gt;
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
      &lt;mat-form-field appearance='outline'&gt;
          &lt;mat-label&gt;Password&lt;/mat-label&gt;
          &lt;input matInput fromControlName="pass" type="pass" placeholder="Password"/&gt;
          &lt;mat-error&gt;
              &lt;div *ngIf="loginForm.get('pass').hasError('required')"&gt;Password is required&lt;/div&gt;
          &lt;/mat-error&gt;
      &lt;/mat-form-field&gt;
      &lt;br&gt;
      &lt;mat-card-actions&gt;
          &lt;button mat-raised-button class="full-width" (click)="auth()"&gt;Login&lt;/button&gt;
      &lt;/mat-card-actions&gt;
  &lt;/form&gt;
  &lt;/mat-card&gt;
  </code></pre>
  
  <p>TYPESCRIPT</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { FormGroup, Validators, FormControl } from '@angular/forms';
  
  @Component({
      selector: 'app-login',
      templateUrl: './login.component.html',
      styleUrls: ['./login.component.css']
  })
  export class LoginComponent implements OnInit {
  
      loginForm: FormGroup;
      userEmail: FormControl;
      userPass: FormControl;
  
      constructor() { }
  
      ngOnInit() {
        this.userEmail = new FormControl('', Validators.compose(
            [Validators.required, Validators.pattern(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,63})$/)]
        ));
        this.userPass = new FormControl('', Validators.required);
        this.loginForm = new FormGroup({
          email: this.userEmail,
          pass: this.userPass
        });
      }
  
      auth(event){
        console.log(event);
      }
  
  }
  </code></pre>
  
  <p>This code used to work as expected before. I wanted to display different message for different cases of validation failures.</p>