未显示mat-error用于自定义验证

Question

我正在尝试添加一个带密码的注册表单并确认密码字段。我已经编写了密码的自定义验证并确认密码字段。但是问题是我的自定义验证可以在我的组件文件中正常运行，而不能在我的模板中运行。

我试图同时使用this.signupForm.errors和this.signupForm.hasError（['notSame']）

查找错误的存在

我的组件文件如下。

import {Component, OnInit} from '@angular/core';
import {LoginSignUpService} from '../../services/LoginSignUp.service';
import {AbstractControl, FormControl, FormGroup, Validators} from '@angular/forms';
import {MatDialog} from '@angular/material';
import {Router} from '@angular/router';
import {DialogComponent} from '../main/dialog/dialog.component';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [LoginSignUpService]
})
export class LoginComponent implements OnInit {

  loginForm: FormGroup;
  signUpForm: FormGroup;

  constructor(private loginSignupService: LoginSignUpService, public dialog: MatDialog, private router: Router) {
  }


  login() {
    if (this.loginForm.controls.loginEmail.errors || this.loginForm.controls.loginPassword.errors) {
      this.openDialog('Error', 'Please fill the fields correctly!');
    } else {
      this.loginSignupService.login(this.loginForm.value.loginEmail, this.loginForm.value.loginPassword)
        .subscribe((response: Response) => {
            let responseBody: any;
            responseBody = response;
            localStorage.setItem('token', responseBody.access);
            localStorage.setItem('refresh-token', responseBody.refresh);
            localStorage.setItem('user', this.loginForm.value.loginEmail);
            this.router.navigate(['blog']);
          },
          (error: Response) => {

            let responseBody: any;
            responseBody = error;
            this.openDialog('Error', responseBody.error.non_field_errors[0]);
          });
    }
  }

  ngOnInit() {
    this.loginForm = new FormGroup({
      loginEmail: new FormControl(null, [Validators.required, Validators.email]),
      loginPassword: new FormControl(null, Validators.required)
    });

    this.signUpForm = new FormGroup({
        signupEmail: new FormControl(null, [Validators.required, Validators.email]),
        signupFirstName: new FormControl(null, [Validators.required, Validators.pattern('[a-zA-Z]*')]),
        signupLastName: new FormControl(null, [Validators.required, Validators.pattern('[a-zA-Z]*')]),
        signupPassword: new FormControl(null, Validators.required),
        confirmSignupPassword: new FormControl(null, Validators.required)
      },
      {validators: this.checkPasswords}
    );
  }

  checkPasswords(controls: AbstractControl): { [key: string]: any } {
    const pass = controls.get(['signupPassword']);
    const confirmPass = controls.get(['confirmSignupPassword']);

    return pass === confirmPass ? null : {notSame: true};
  }

  signUp() {
    if (this.signUpForm.controls.signupEmail.errors || this.signUpForm.controls.signupFirstName.errors
      || this.signUpForm.controls.signupLastName.errors || this.signUpForm.controls.signupPassword.errors
      || this.signUpForm.controls.confirmSignupPassword.errors || this.signUpForm.errors) {
      this.openDialog('Error', 'Please fill the fields correctly!');
    } else {

    }

  }

  openDialog(success: string, messsage: string) {
    const dialogRef = this.dialog.open(DialogComponent, {
      width: '300px',
      data: {
        isSuccess: success,
        message: messsage
      }
    });
  }
}

我要显示错误的模板中的代码如下：

<mat-form-field>
    <input matInput placeholder="confirm password" formControlName="confirmSignupPassword">
    <mat-error *ngIf="signUpForm.controls['confirmSignupPassword'].hasError('required')">
    Please confirm your password
    </mat-error>
    <mat-error *ngIf="!signUpForm.controls['confirmSignupPassword'].hasError('required') && signUpForm.hasError('notSame')">
    Passwords are not same
    </mat-error>
</mat-form-field>

问题在于，永远不会显示错误的密码不相同。尽管我的组件文件中的方法signup（）成功显示了对话框。