Angular 4 enable HTML5 validation

Question

I want to use HTML5 validation in Angular 4 rather than their form's based validation/reactive validation. I want to keep the validation running in the browser.

It used to work in Angular 2, but since I've upgraded, I can't get even manually created forms without any angular directives to validate using HTML5.

For instance, this won't validate in the browser at all:

<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

Tyler Jennings · Accepted Answer · 2017-04-03 16:44:12Z

59

Angular4 automatically adds a novalidate attribute to forms.

To override this, you can add the ngNativeValidate directive to the form.

<form ngNativeValidate>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br />
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required>

<input type="submit" value="Submit">

</form>

Unfortunately I do not see this reflected in the docs yet, but found it by looking at the source code: https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_no_validate_directive.ts

It appears also adding ngNoForm to the form has the same effect as ngNativeValidate depending on your use-cases for needing to declare something as not a form for whatever reason.

Hope this helps.

edited Apr 3, 2017 at 16:44

answered Apr 3, 2017 at 16:36

Tyler Jennings

8,9212 gold badges46 silver badges40 bronze badges

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

2 Comments

Murali Murugesan Over a year ago

It doesn't work with pattern fields when I have form like <form name="componentForm" ngNativeValidate #componentform="ngForm" (ngSubmit)="saveComponent()" autocomplete="off">

Sebi2020 Over a year ago

ngNativeValidate validate does not stop click handlers on submit buttons from being executed (FormsModule)

Simran · Accepted Answer · 2017-09-04 11:34:30Z

4

use ngNoForm or ngNativeValidate in your form

<form ngNoForm/ngNativeValidate>
...
</form>

answered Sep 4, 2017 at 11:34

Simran

2,8601 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Angular 4 enable HTML5 validation

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related