Angular 未显示自定义验证的mat错误

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

我尝试使用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>

请确认您的密码
密码不一样

---

问题在于，mat错误密码不相同，并且从不显示。虽然我的组件文件中的方法signup（）成功地显示了对话框。

这样做

signUpForm.controls['confirmSignupPassword'].hasrerror（'required'））

求值为

false

？这不是求值为false，我猜在时间段中如果它不是求值为

false

，那么您的

*ngIf

条件将永远不会满足，因为您正在使用

&

。