cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(forms): remove ngForm element selector (#33058)

Browse Source 
Removes the deprecated `ngForm` element selector and all of the code related to it.

BREAKING CHANGES:
* `<ngForm></ngForm>` can no longer be used as a selector. Use `<ng-form></ng-form>` instead.
* The `NgFromSelectorWarning` directive has been removed.
* `FormsModule.withConfig` has been removed. Use the `FormsModule` directly.

PR Close #33058
This commit is contained in:
crisbeto
2019-10-11 00:55:47 +02:00
committed by Miško Hevery
parent 15e3b5f531
commit 0b1daa9ebd
9 changed files with 15 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/forms/src/directives.ts
View File

@ -12,7 +12,6 @@ import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor
import {DefaultValueAccessor} from './directives/default_value_accessor';
import {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
import {NgForm} from './directives/ng_form';
import {NgFormSelectorWarning} from './directives/ng_form_selector_warning';
import {NgModel} from './directives/ng_model';
import {NgModelGroup} from './directives/ng_model_group';
import {NgNoValidate} from './directives/ng_no_validate_directive';
@ -33,7 +32,6 @@ export {DefaultValueAccessor} from './directives/default_value_accessor';
export {NgControl} from './directives/ng_control';
export {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
export {NgForm} from './directives/ng_form';
export {NG_FORM_SELECTOR_WARNING, NgFormSelectorWarning} from './directives/ng_form_selector_warning';
export {NgModel} from './directives/ng_model';
export {NgModelGroup} from './directives/ng_model_group';
export {NumberValueAccessor} from './directives/number_value_accessor';
@ -67,8 +65,7 @@ export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
EmailValidator,
];
export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] =
[NgModel, NgModelGroup, NgForm, NgFormSelectorWarning];
export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] = [NgModel, NgModelGroup, NgForm];
export const REACTIVE_DRIVEN_DIRECTIVES: Type<any>[] =
[FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];

2
packages/forms/src/directives/ng_form.ts
View File

@ -94,7 +94,7 @@ const resolvedPromise = (() => Promise.resolve(null))();
* @publicApi
*/
@Directive({
selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,ng-form,[ngForm]',
selector: 'form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]',
providers: [formDirectiveProvider],
host: {'(submit)': 'onSubmit($event)', '(reset)': 'onReset()'},
outputs: ['ngSubmit'],

42
packages/forms/src/directives/ng_form_selector_warning.ts
View File

@ -1,42 +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, Inject, InjectionToken, Optional} from '@angular/core';
import {TemplateDrivenErrors} from './template_driven_errors';
/**
* @description
* `InjectionToken` to provide to turn off the warning when using 'ngForm' deprecated selector.
*/
export const NG_FORM_SELECTOR_WARNING = new InjectionToken('NgFormSelectorWarning');
/**
* This directive is solely used to display warnings when the deprecated `ngForm` selector is used.
*
* @deprecated in Angular v6 and will be removed in Angular v9.
* @ngModule FormsModule
* @publicApi
*/
@Directive({selector: 'ngForm'})
export class NgFormSelectorWarning {
/**
* Static property used to track whether the deprecation warning for this selector has been sent.
* Used to support warning config of "once".
*
* @internal
*/
static _ngFormWarning = false;
constructor(@Optional() @Inject(NG_FORM_SELECTOR_WARNING) ngFormWarning: string|null) {
if (((!ngFormWarning || ngFormWarning === 'once') && !NgFormSelectorWarning._ngFormWarning) ||
ngFormWarning === 'always') {
TemplateDrivenErrors.ngFormWarning();
NgFormSelectorWarning._ngFormWarning = true;
}
}
}

17
packages/forms/src/directives/template_driven_errors.ts
View File

@ -57,21 +57,4 @@ export class TemplateDrivenErrors {
${Examples.ngModelGroup}`);
}
static ngFormWarning() {
console.warn(`
It looks like you're using 'ngForm'.
Support for using the 'ngForm' element selector has been deprecated in Angular v6 and will be removed
in Angular v9.
Use 'ng-form' instead.
Before:
<ngForm #myForm="ngForm">
After:
<ng-form #myForm="ngForm">
`);
}
}

19
packages/forms/src/form_providers.ts
View File

@ -8,7 +8,7 @@
import {ModuleWithProviders, NgModule} from '@angular/core';
import {InternalFormsSharedModule, NG_FORM_SELECTOR_WARNING, NG_MODEL_WITH_FORM_CONTROL_WARNING, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES} from './directives';
import {InternalFormsSharedModule, NG_MODEL_WITH_FORM_CONTROL_WARNING, REACTIVE_DRIVEN_DIRECTIVES, TEMPLATE_DRIVEN_DIRECTIVES} from './directives';
import {RadioControlRegistry} from './directives/radio_control_value_accessor';
import {FormBuilder} from './form_builder';
@ -26,23 +26,6 @@ import {FormBuilder} from './form_builder';
exports: [InternalFormsSharedModule, TEMPLATE_DRIVEN_DIRECTIVES]
})
export class FormsModule {
/**
* @description
* Provides options for configuring the template-driven forms module.
*
* @param opts An object of configuration options
* * `warnOnDeprecatedNgFormSelector` Configures when to emit a warning when the deprecated
* `ngForm` selector is used.
*/
static withConfig(opts: {
/** @deprecated as of v6 */ warnOnDeprecatedNgFormSelector?: 'never' | 'once' | 'always',
}): ModuleWithProviders<FormsModule> {
return {
ngModule: FormsModule,
providers:
[{provide: NG_FORM_SELECTOR_WARNING, useValue: opts.warnOnDeprecatedNgFormSelector}]
};
}
}
/**

1
packages/forms/src/forms.ts
View File

@ -29,7 +29,6 @@ export {Form} from './directives/form_interface';
export {NgControl} from './directives/ng_control';
export {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
export {NgForm} from './directives/ng_form';
export {NgFormSelectorWarning} from './directives/ng_form_selector_warning';
export {NgModel} from './directives/ng_model';
export {NgModelGroup} from './directives/ng_model_group';
export {ɵNgNoValidate} from './directives/ng_no_validate_directive';

57
packages/forms/test/template_integration_spec.ts
View File

@ -9,7 +9,7 @@
import {ɵgetDOM as getDOM} from '@angular/common';
import {Component, Directive, Type, forwardRef} from '@angular/core';
import {ComponentFixture, TestBed, async, fakeAsync, tick} from '@angular/core/testing';
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgFormSelectorWarning, NgModel} from '@angular/forms';
import {AbstractControl, AsyncValidator, COMPOSITION_BUFFER_MODE, FormControl, FormsModule, NG_ASYNC_VALIDATORS, NgForm, NgModel} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {dispatchEvent, sortedClassList} from '@angular/platform-browser/testing/src/browser_util';
import {merge} from 'rxjs';
@ -1630,61 +1630,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
}));
});
describe('ngForm deprecation warnings', () => {
let warnSpy: jasmine.Spy;
@Component({selector: 'ng-form-deprecated', template: `<ngForm></ngForm><ngForm></ngForm>`})
class ngFormDeprecated {
}
beforeEach(() => {
(NgFormSelectorWarning as any)._ngFormWarning = false;
warnSpy = spyOn(console, 'warn');
});
describe(`when using the deprecated 'ngForm' selector`, () => {
it(`should only warn once when global provider is provided with "once"`, () => {
TestBed.configureTestingModule({
declarations: [ngFormDeprecated],
imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'once'})]
});
TestBed.createComponent(ngFormDeprecated);
expect(warnSpy).toHaveBeenCalledTimes(1);
expect(warnSpy.calls.mostRecent().args[0])
.toMatch(/It looks like you're using 'ngForm'/gi);
});
it(`should only warn once by default`, () => {
initTest(ngFormDeprecated);
expect(warnSpy).toHaveBeenCalledTimes(1);
expect(warnSpy.calls.mostRecent().args[0])
.toMatch(/It looks like you're using 'ngForm'/gi);
});
it(`should not warn when global provider is provided with "never"`, () => {
TestBed.configureTestingModule({
declarations: [ngFormDeprecated],
imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'never'})]
});
TestBed.createComponent(ngFormDeprecated);
expect(warnSpy).not.toHaveBeenCalled();
});
it(`should only warn for each instance when global provider is provided with "always"`,
() => {
TestBed.configureTestingModule({
declarations: [ngFormDeprecated],
imports: [FormsModule.withConfig({warnOnDeprecatedNgFormSelector: 'always'})]
});
TestBed.createComponent(ngFormDeprecated);
expect(warnSpy).toHaveBeenCalledTimes(2);
expect(warnSpy.calls.mostRecent().args[0])
.toMatch(/It looks like you're using 'ngForm'/gi);
});
});
});
});
}