HTML required validation ignored by Angular 4?

Question

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>

Mel

Answer 1

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>

Intransigeance

Answer 2

I think you need to specify novalidate on your <form> tag. Angular already attaches a validator to any element with an ngModel directive which includes a required attribute. It might be validating and you just don't notice? Use chrome devtools to see if the inputs have the ng-invalid class on them?

Ducks

Yes I have checked it has ng-invalid class, what I need is to have built-in browser validation message like this html5rocks.com/static/images/tutorials/constraintvalidation/… , how do you think novalidate would help ? – Mel

Oh, you want both the browser messages to appear and angular to maintain validation status? Remove novalidate then – Ducks

with or without novalidare, I can't get desired behaiviour wich is, (run built-in browser validation normally then execute submit function) – Mel

Oh you want to prevent the submit until the browser agrees all fields are valid? – Ducks

I think you need to use (submit) then, because (ngSubmit) because it skips the browser's default execution for the event... – Ducks

that doesn't change anything – Mel

I'm not sure I understand what's happening or what you're trying to get to work. Maybe a plunk? – Ducks