Странные ошибки с проверкой Angular Reactive Forms

Я тестирую простую функцию входа в систему в форме компонента моей страницы продуктов, используя Angular 7, и у меня такое странное поведение. Я пытаюсь отобразить соответствующие сообщения проверки, если существует ошибка, например, если это недействительный адрес электронной почты, должно отображаться сообщение «должен быть действительный адрес электронной почты», а если поле оставлено пустым, должна отображаться ошибка «электронная почта требуется», и когда вы начинаете печатать, отображается требуемое сообщение исчезает и отображается только действительное сообщение об ошибке электронной почты. Это мой код.

Addproduct.component.html

Итак, теперь я пытаюсь отобразить сообщения span, если ошибка существует, но она не работает.

<form [formGroup] = "loginForm" class = "login-container" (ngSubmit) = "login()">            
    <p>
        <input class = "form-control" type = "email" placeholder = "Email here" formControlName = "email">
        <span *ngIf = "f.email.errors.required">email is required</span>
        <span *ngIf = "f.email.errors.email">must be a valid email</span>
    </p>            
    <p>
        <input class = "form-control" type = "password" placeholder = "Password here" formControlName = "password">
        <span *ngIf = "f.password.errors.required">Password is required</span>
    </p>
    <p><button type = "submit" class = "btn btn-md btn-primary">Submit</button></p>        
</form>

Добавитьпродукт.component.ts

и это контроллер, я пытался использовать краткую нотацию для правил проверки, но пока безрезультатно.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

  loginForm:FormGroup;
  isSubmitted:boolean = false;

  constructor(
    private router:Router,
    private fb:FormBuilder
  ){}

  ngOnInit() { 
    this.loginForm = this.fb.group({           
      email : ['',  [Validators.required,Validators.email]],    
      password : ['', [Validators.required,Validators.min(6)]]
    });
  }

  get f(){
    return this.loginForm.controls;
  }

}

Я также изменил сценарии проверки на это, но все равно безрезультатно

ngOnInit() { 
   this.loginForm = this.fb.group({           
      email : new FormControl('',  [Validators.required,Validators.email]),    
      password : new FormControl('', [Validators.required,Validators.min(6)])
   });
}

и я получаю эту ошибку