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>

TylerH · Accepted Answer · 2023-05-17 19:40:55Z

13

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>

edited May 17, 2023 at 19:40

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered May 18, 2017 at 9:56

cortopy

2,9072 gold badges28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2017-04-26 09:31:42Z

0

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?

answered Apr 26, 2017 at 9:31

Amit

4,35323 silver badges25 bronze badges

7 Comments

Sofia Namoun Over a year ago

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 ?

Amit Over a year ago

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

Sofia Namoun Over a year ago

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

Amit Over a year ago

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

Amit Over a year ago

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

|

Collectives™ on Stack Overflow

HTML required validation ignored by Angular 4?

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related