Angular 8 mat-error 不显示错误信息

Question

我从我的一个旧项目中借用了以下代码，它在其中运行良好。但是现在它没有显示任何错误消息，因为我在新项目中使用了相同的代码。

HTML

<mat-card class="centered card">
<form [formGroup]="loginForm"> 
    <mat-form-field appearance='outline'>
        <mat-label>Email</mat-label>
        <input matInput fromControlName="email" type="email" placeholder="Email"/>
        <mat-error>
            <div *ngIf="loginForm.get('email').hasError('pattern')">Enter valid Email ID</div>
            <div *ngIf="loginForm.get('email').hasError('required')">Email is required</div>
        </mat-error>
    </mat-form-field>
    <br>
    <mat-form-field appearance='outline'>
        <mat-label>Password</mat-label>
        <input matInput fromControlName="pass" type="pass" placeholder="Password"/>
        <mat-error>
            <div *ngIf="loginForm.get('pass').hasError('required')">Password is required</div>
        </mat-error>
    </mat-form-field>
    <br>
    <mat-card-actions>
        <button mat-raised-button class="full-width" (click)="auth()">Login</button>
    </mat-card-actions>
</form>
</mat-card>

打字

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);
    }

}

此代码以前按预期工作。我想针对不同的验证失败情况显示不同的消息。

Answer 1

这似乎是一个简单的错字：将 fromControlName 改为 formControlName

Angular 8 mat-error 不显示错误信息

Angular 8 mat-error not displaying error message

angular

typescript

angular8

mat-error