HTML required validation ignored by Angular 4?

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>

I was also bitten by this change. It's not listed in the list of breaking changes in angular 4.

You need to add ngNativeValidate:

<form ngNativeValidate #loginForm="ngForm" (ngSubmit)="login()" class="m-t" role="form" action="#">

as per this GitHub comment by Dzmitry Shylovich:

Angular automatically has added novalidate attribute since 4.0. To disable it add ngNativeValidate:

<form ngNativeValidate>...</form>