feat(forms): add option to use browser's native validation and angula…

…r forms (#13566)

Also renames NgNovalidate -> NgNoValidate

Closes #13573

modules/@angular/forms/src/directives.ts

@@ -14,7 +14,7 @@ import {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_sta
 import {NgForm} from './directives/ng_form';
 import {NgModel} from './directives/ng_model';
 import {NgModelGroup} from './directives/ng_model_group';
-import {NgNovalidate} from './directives/ng_novalidate_directive';
+import {NgNoValidate} from './directives/ng_no_validate_directive';
 import {NumberValueAccessor} from './directives/number_value_accessor';
 import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
 import {RangeValueAccessor} from './directives/range_value_accessor';
@@ -45,7 +45,7 @@ export {NgSelectOption, SelectControlValueAccessor} from './directives/select_co
 export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
 
 export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
-  NgNovalidate,
+  NgNoValidate,
   NgSelectOption,
   NgSelectMultipleOption,
   DefaultValueAccessor,

modules/@angular/forms/src/directives/ng_no_validate_directive.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Directive} from '@angular/core';
+
+/**
+ * @whatItDoes Adds `novalidate` attribute to all forms by default.
+ *
+ * `novalidate` is used to disable browser's native form validation.
+ *
+ * If you want to use native validation with Angular forms, just add `ngNativeValidate` attribute:
+ *
+ * ```
+ * <form ngNativeValidate></form>
+ * ```
+ *
+ * @experimental
+ */
+@Directive({
+  selector: 'form:not([ngNoForm]):not([ngNativeValidate])',
+  host: {'novalidate': ''},
+})
+export class NgNoValidate {
+}

modules/@angular/forms/test/template_integration_spec.ts

@@ -97,6 +97,16 @@ export function main() {
            expect(form.nativeElement.getAttribute('novalidate')).toEqual('');
          }));
 
+      it('should be possible to use native validation and angular forms', fakeAsync(() => {
+           const fixture = initTest(NgModelNativeValidateForm);
+
+           fixture.detectChanges();
+           tick();
+
+           const form = fixture.debugElement.query(By.css('form'));
+           expect(form.nativeElement.hasAttribute('novalidate')).toEqual(false);
+         }));
+
       it('should support ngModelGroup', fakeAsync(() => {
            const fixture = initTest(NgModelGroupForm);
            fixture.componentInstance.first = 'Nancy';
@@ -258,7 +268,7 @@ export function main() {
         const fixture = initTest(NgNoFormComp);
         fixture.detectChanges();
         const form = fixture.debugElement.query(By.css('form'));
-        expect(form.nativeElement.hasAttribute('novalidate')).toBeFalsy();
+        expect(form.nativeElement.hasAttribute('novalidate')).toEqual(false);
       });
     });
 
@@ -1222,6 +1232,10 @@ class NgModelForm {
   onReset() {}
 }
 
+@Component({selector: 'ng-model-native-validate-form', template: `<form ngNativeValidate></form>`})
+class NgModelNativeValidateForm {
+}
+
 @Component({
   selector: 'ng-model-group-form',
   template: `