Angular 4 is ignoring built-in html validation.

How to make Angular consider html required field for input elements ?

Desired behaiviour:

code :

         <form #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#">
            <div class="form-group">
                <input type="text" [(ngModel)]="username" name="username" class="form-control" 
                [placeholder]="'Nom d\'utilisateur' | translate"  required />
            </div>
            <div class="form-group">
                <input type="password" [(ngModel)]="password" name="password" class="form-control" 
                [placeholder]="'Mot de passe' | translate" required>
            </div>
            <button type="submit" data-spinner-color="white" data-style="zoom-in" 
            [ladda]="isLoading" translate class="btn btn-primary block full-width m-b">
                <span translate >Login</span>
            </button>

            <a [routerLink]="['/reset' , '1']"><small translate>Mot de passe oublié ?</small></a>
            <br><br>
            <p class="text-muted text-center">
                <small translate>vous n'êtes pas encore enregistré ?</small>
            </p>
            <a translate id="register" class="btn btn-sm btn-white btn-block" [routerLink]="['/register']">
                 Créer un compte
            </a>
        </form>