HTML5 required attribute not working in Angular 2 project, installed using CLI

Question

I am working on Angular 2 login page, when I try to validate input field with HTML 5 validate attribute required, it is not working, where as in the quick start project it works fine. Could any one explain why it is not working and how to resolve this issue ?

Plunker link of my code In Plunker, it validates but in my project its not working.

app.component.html code below,

<form class="login-form">
  <input type="text" name="usrname" placeholder="Username"  required/>

  <input type="password" name="pwd" placeholder="Password"  required>
  <input type="submit">

</form>

Answer 1

As of version 4.0.0, Angular automatically adds "novalidate" to the form. Change this new default behavior by using:

<form ngNativeValidate>...</form>

Github issue here: https://github.com/angular/angular/issues/15531#issuecomment-289555359

Answer 2

     <form class="login-form" novalidate> 
    <input type="text" name="usrname" placeholder="Username" required="required"> 
<input type="password" name="pwd" placeholder="Password" required="required"> 
<button type="submit">Submit </button> 
    </form> 

remove novalidate from your form tag to enable html5 validation

<form class="login-form" >

If you use novalidate in your form tag, the validation wont occur as that's that the novalidate keyword is for when you don't want the default html5 validation and you want to implement your own validation means you have to use the novalidate otherwise you don't need it