diff --git a/modules/@angular/forms/src/directives.ts b/modules/@angular/forms/src/directives.ts index 9ba153f5ff..41a298e90e 100644 --- a/modules/@angular/forms/src/directives.ts +++ b/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[] = [ - NgNovalidate, + NgNoValidate, NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, diff --git a/modules/@angular/forms/src/directives/ng_no_validate_directive.ts b/modules/@angular/forms/src/directives/ng_no_validate_directive.ts new file mode 100644 index 0000000000..7bcdf6fbbe --- /dev/null +++ b/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: + * + * ``` + *
+ * ``` + * + * @experimental + */ +@Directive({ + selector: 'form:not([ngNoForm]):not([ngNativeValidate])', + host: {'novalidate': ''}, +}) +export class NgNoValidate { +} diff --git a/modules/@angular/forms/src/directives/ng_novalidate_directive.ts b/modules/@angular/forms/src/directives/ng_novalidate_directive.ts deleted file mode 100644 index 72228a1b8c..0000000000 --- a/modules/@angular/forms/src/directives/ng_novalidate_directive.ts +++ /dev/null @@ -1,16 +0,0 @@ -/** - * @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'; - -@Directive({ - selector: 'form:not([ngNoForm])', - host: {'novalidate': ''}, -}) -export class NgNovalidate { -} diff --git a/modules/@angular/forms/test/template_integration_spec.ts b/modules/@angular/forms/test/template_integration_spec.ts index f7850644e1..5bedc8472a 100644 --- a/modules/@angular/forms/test/template_integration_spec.ts +++ b/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: `
`}) +class NgModelNativeValidateForm { +} + @Component({ selector: 'ng-model-group-form', template: `