错误消息不显示，即使表单字段在angular 6模板驱动的表单验证中无效

Question

我试图以模板驱动形式angular6显示错误消息。但这不再显示了，我不知道我的代码有什么问题 我也是

  

从“ @ angular / forms”导入{FormsModule};

在main.module.ts中，此主模块导入了app.module.ts

HTML文件

Is initial view controller

ts文件

<div class="login-register-form">
     <form name="form" #f="ngForm" (ngSubmit)="f.form.valid && authenticate(f)" novalidate>
     <input type="text" #mobile="ngModel" [(ngModel)]="user.mobile" name="mobile" placeholder="Mobile Number" [pattern]="mobRegEx" required>
     <span *ngIf="mobile.errors?.required && mobile.touched" class="text-danger">Please enter mobile number</span>
     <input type="password" #password="ngModel" [(ngModel)]="user.password" name="user-password" placeholder="Password" minlength="4" required>
   <div class="button-box">
   <div class="login-toggle-btn">
   <button type="submit"><span>Login</span></button>
   <a href="#">Forgot Password?</a>
   </div>
   </div>
  </form>
 </div> 

用户模型

import { Component, OnInit } from '@angular/core';
import { Router } from "@angular/router";
import { User } from "./../../../shared/services/user.model";
import { UserService } from "./../../../shared/services/user.service";
@Component({
  selector: 'suriyaApp-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
user = new User();

  mobRegEx = /^(?:(?:\+|0{0,2})91(\s*[\ -]\s*)?|[0]?)?[6789]\d{9}|(\d[ -]?){10}\d$/;
  emailRegEx = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;

  constructor(private userService: UserService) { }

  ngOnInit() {
  }

  authenticate(user: User): void{
    console.log(user);
    this.userService.loginAuth(user).subscribe(data=> {
      console.log("hi uu success", data);

    }, error=> {
      console.log("hi uu err", error);

    })
  }
}

如果我绑定{{mobile.errors | json}}，那么即使我填写该字段，它也始终显示为{“ required”：true}。