Angular disable browser validation

Suggested Videos
Part 11 - Angular datepicker tutorial | Text | Slides
Part 12 - Customise ngx-bootstrap datepicker | Text | Slides
Part 13 - Angular ngif directive | Text | Slides

In this video we will discuss the following

• By default Angular 4 and later versions disable browser native validation. How to enable browser validation using ngNativeValidate directive
• How to explicitly disable the native browser validation using the novalidate attribute if you are using Angular 2.
• Why is it better to disable browser built-in validation and use Angular to validate instead

To understand browser native validation, 

1. On the "Create Employee" view template, include required attribute on FullName input field 


2. Navigate to the "Create Employee" form and launch browser developer tools.  


3. Do not type anything in the "Full Name" input field click the "Save" button.


4. Notice we do not get any validation, in spite of having required attribute on the "Full Name" input field.


5. This is because by default, Angular 4 and later versions disable browser validation by including novalidate attribute on the form tag.


6. To confirm this, click on the "Elements" tab in the browser developer tools and you will see "novalidate" attribute on the form tag


7. If you want to enable browser validation, include ngNativeValidate directive on the form tag in create-employee.component.html file
   
   
   <form #employeeForm="ngForm" ngNativeValidate
         (ngSubmit)="saveEmployee(employeeForm)">


8. At this point, if you click the "Save" button without typing anything in the Full Name field, the native browser validation kicks in and you will see "Please fill in this field" validation error. At the moment I am using Google Chrome browser.
   
   


9. Now if you view the same page in a different browser like Firefox for example, you will have a different experience. The browser validation is displayed in Firefox as shown below.
   
   


10. Because of this inconsistency it is better to disable browser native validation and use Angular instead to validate form fields. We will discuss validaing form fields using Angular in our upcoming videos.


11. By default, browser built-in validation is disabled if you are using Angular 4 or any later version.


12. At the moment, we are using Angular version 5 and want to keep browser validation disabled, so remove the ngNativeValidate directive from the form tag.


13. If you are using Angular 2, you will have to explicitly disable browser validation by using novalidate attribute on the form tag.

Why is it better to disable browser built-in validation and use Angular to validate instead
Different browser vendors implement browser validation differently and as a result, the end users have different experience depending on the browser they use. Because of this inconsistency it is better to disable browser native validation and use Angular instead to validate form fields. 

Next video : We will discuss validating form fields using Angular