Почему моя форма входа в Angular не проверяется и сообщение об ошибке не отображается?

Question

У меня есть эта Angular форма

<div class="my-container">
    <form  [formGroup]="loginForm" (ngSubmit)="onSubmit()">
        <br/>
        <br/>
        <br/>
        <div class="form-group">
            <label for="username" style="color: rgb(255, 255, 255);" >
                إسم المستخدم    
                </label>
            <input   type="text" formControlName="username" class=" mybuttun form-control" [ngClass]="{ 'is-invalid': submitted && f.username.errors }" />
            <div *ngIf="f.username.errors" class="invalid-feedback">
                <div *ngIf="f.username.errors.required">Username is required</div>
            </div>
        </div>
        <div class="form-group">
            <label for="password" style="color: rgb(255, 255, 255);">كلمة المرور    </label>
            <input    type="password" formControlName="password" class=" mybuttun form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
            <div *ngIf=" f.password.errors">
                <div *ngIf="f.password.errors.required">Password is required</div>
            </div>
        </div>
        <div class="form-group">
            <button   style="background: #ebe3da none repeat scroll 0 0 !important;
            color: #7c5840 !important;
            cursor: pointer;
            height: 37px !important;
            min-width: 120px;
            width: auto !important;
            border: 2px solid !important;" type="submit" class="btn btn-primary">
              دخول   


              <br/>
              <mat-progress-spinner *ngIf="loading" 
              mode="indeterminate" >
            </mat-progress-spinner> 
            </button>
            
        </div>
    </form>
</div>

Вот мой файл компонента

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AlertService, AuthenticationService } from '../_services';
@Component(
    { 
        templateUrl: 'login.component.html',
        styleUrls: ['./login.component.css'],
    }
        
    )
export class LoginComponent implements OnInit {
    loginForm: FormGroup;
    loading = false;
    returnUrl: string;

    constructor(
        private formBuilder: FormBuilder,
        private route: ActivatedRoute,
        private router: Router,
        private authenticationService: AuthenticationService,
        private alertService: AlertService
    ) {
        if (this.authenticationService.currentUserValue) {
            this.router.navigate(['/']);
        }
    }

    ngOnInit() {
        console.log()
        this.loginForm = this.formBuilder.group({
            username: ['', Validators.required],
            password: ['', Validators.required]
        });
        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
    }

    isEmptyObject(obj) {
        return (obj && (Object.keys(obj).length === 0));
     }
    get f() { return this.loginForm.controls; }
    onSubmit() {
        if (this.loginForm.invalid) {

            return;
        }
        this.alertService.clear();
        this.loading = true;
        this.authenticationService.login(this.f.username.value, this.f.password.value)
            .subscribe(
                data => {
                    console.log(data);
                    this.router.navigate([''])
                    .then(() => {
                        location.reload();
                    });
                },
                error => {
                    console.log(error);
                    this.alertService.error("فشل محاولة الدخول / كلمة المرور أو اسم المستخدم غير صحيح");
                    this.loading = false;
                });
    }
}

Когда я нажимаю кнопку, проверка не происходит ...

Думаю, class="invalid-feedback" должен показывать ошибку