title: Angular material: mat-error not showing despite true methods
body: <p>I have a confirm password formcontrol that I want to validate. </p>
  
  <p>I want to display my mat-error element when the password is not the same as the value in the confirm password input. For this I have a function called <code>equalPasswords()</code>. If the functions are the same then we receive true, if not, we receive false.</p>
  
  <pre><code>&lt;mat-form-field&gt;
                &lt;input matInput placeholder="Repeat password" [formControl]="password2" type="password"&gt;
                &lt;mat-error *ngIf="password2.invalid &amp;&amp; password2.hasError('required')"&gt;Password is required&lt;/mat-error&gt;
                &lt;mat-error *ngIf="!equalPasswords() &amp;&amp; !password2.hasError('required')"&gt;Passwords need to match&lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>I checked the console and when I enter two different inputs in the password boxes it equalPasswords() returns false. It however still doesn't show the error in the DOM.</p>
  
  <p>Does someone know how to fix this?</p>
  
  <p><strong>Signup.component.ts</strong></p>
  
  <pre><code>@Component({
      selector: 'app-sign-up',
      templateUrl: 'sign-up.component.html',
      styleUrls: ['sign-up.component.css']
  })
  
  export class SignUpComponent implements OnInit {
  
      mySignupForm: FormGroup;
      countries = countries;
      uniqueUsernameMessage;
      uniqueEmailMessage;
      formSubmitted = false;
      @Output() closeSubmenu = new EventEmitter();
      @ViewChild('select') select;
  
      constructor(
          private authService: AuthenticationService,
          private route: Router,
          private navigationService: NavigationService){}
  
      get firstName() { return this.mySignupForm.get('firstName'); }
      get lastName() { return this.mySignupForm.get('lastName'); }
      get username() { return this.mySignupForm.get('username'); }
      get email() { return this.mySignupForm.get('email'); }
      get password1() { return this.mySignupForm.get('password1'); }
      get password2() { return this.mySignupForm.get('password2'); }
      get birthDate() { return this.mySignupForm.get('birthDate'); }
      get country() { return this.mySignupForm.get('country'); }
      get house() { return this.mySignupForm.get('house'); }
  
      ngOnInit() {
          this.mySignupForm = new FormGroup({
              firstName: new FormControl(null, Validators.required),
              lastName: new FormControl(null, Validators.required),
              username: new FormControl(null, [Validators.required, Validators.minLength(5), Validators.maxLength(15)]),
              birthDate: new FormControl(null, Validators.required),
              password1: new FormControl(null, [Validators.required, Validators.minLength(6), Validators.maxLength(15), Validators.pattern('^.*(?=.{4,10})(?=.*\\d)(?=.*[a-zA-Z]).*$')]),
              password2: new FormControl(null, Validators.required),
              email: new FormControl(null, [Validators.required, Validators.email]),
              country: new FormControl(null, Validators.required),
              house: new FormControl(null, Validators.required)
          })
      }
  
      equalPasswords() {
  
          console.log('equaltest', this.password1.value === this.password2.value);
          return this.password1.value === this.password2.value;
      }
  
  }
  </code></pre>