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.
appponent.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>
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>
- what you expected to see?? Please explain why it is not working? We can't by looking at this generic statement.. – Pankaj Parkar Commented Mar 27, 2017 at 11:03
- can you recreate you problem on plunker ? – Pardeep Jain Commented Mar 27, 2017 at 11:03
- have you added <!doctype html> to your index page? – Sriram Commented Mar 27, 2017 at 11:10
- 1 do you have novalidate on the <form> tag? can you show the whole template and component? – Jason White Commented Mar 27, 2017 at 11:21
- 1 when using angulars built in validation you need to disable the browswers default validation by adding novalidate to the form tag <form novalidate>...</form> – Jason White Commented Mar 27, 2017 at 11:24
2 Answers
Reset to default 27As 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
<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