feat(forms): add modules for forms and deprecatedForms (#9859)
Closes #9732 BREAKING CHANGE: We have removed the deprecated form directives from the built-in platform directive list, so apps are not required to package forms with their app. This also makes forms friendly to offline compilation. Instead, we have exposed three modules: OLD API: - `DeprecatedFormsModule` NEW API: - `FormsModule` - `ReactiveFormsModule` If you provide one of these modules, the default forms directives and providers from that module will be available to you app-wide. Note: You can provide both the `FormsModule` and the `ReactiveFormsModule` together if you like, but they are fully-functional separately. **Before:** ```ts import {disableDeprecatedForms, provideForms} from @angular/forms; bootstrap(App, [ disableDeprecatedForms(), provideForms() ]); ``` **After:** ```ts import {DeprecatedFormsModule} from @angular/common; bootstrap(App, {modules: [DeprecatedFormsModule] }); ``` -OR- ```ts import {FormsModule} from @angular/forms; bootstrap(App, {modules: [FormsModule] }); ``` -OR- ```ts import {ReactiveFormsModule} from @angular/forms; bootstrap(App, {modules: [ReactiveFormsModule] }); ``` You can also choose not to provide any forms module and run your app without forms. Or you can choose not to provide any forms module *and* provide form directives at will. This will allow you to use the deprecatedForms API for some components and not others. ``` import {FORM_DIRECTIVES, FORM_PROVIDERS} from @angular/forms; @Component({ selector: some-comp, directives: [FORM_DIRECTIVES], providers: [FORM_PROVIDERS] }) class SomeComp ```
This commit is contained in:
@ -6,64 +6,37 @@
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
|
||||
import {COMMON_DIRECTIVES, FORM_DIRECTIVES as OLD_FORM_DIRECTIVES, FORM_PROVIDERS as OLD_FORM_PROVIDERS} from '@angular/common';
|
||||
import {CompilerConfig} from '@angular/compiler';
|
||||
import {PLATFORM_DIRECTIVES, PLATFORM_PIPES, Type} from '@angular/core';
|
||||
|
||||
import {FORM_DIRECTIVES as NEW_FORM_DIRECTIVES} from './directives';
|
||||
import {RadioControlRegistry as NewRadioControlRegistry} from './directives/radio_control_value_accessor';
|
||||
import {ListWrapper} from './facade/collection';
|
||||
import {FormBuilder as NewFormBuilder} from './form_builder';
|
||||
|
||||
import {AppModule, Type} from '@angular/core';
|
||||
import {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES} from './directives';
|
||||
import {RadioControlRegistry} from './directives/radio_control_value_accessor';
|
||||
import {FormBuilder} from './form_builder';
|
||||
|
||||
|
||||
/**
|
||||
* Shorthand set of providers used for building Angular forms.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
* ```typescript
|
||||
* bootstrap(MyApp, [FORM_PROVIDERS]);
|
||||
* ```
|
||||
*
|
||||
* @experimental
|
||||
*/
|
||||
export const FORM_PROVIDERS: Type[] = /*@ts2dart_const*/[NewFormBuilder, NewRadioControlRegistry];
|
||||
|
||||
function flatten(platformDirectives: any[]): any[] {
|
||||
let flattenedDirectives: any[] = [];
|
||||
platformDirectives.forEach((directives) => {
|
||||
if (Array.isArray(directives)) {
|
||||
flattenedDirectives = flattenedDirectives.concat(directives);
|
||||
} else {
|
||||
flattenedDirectives.push(directives);
|
||||
}
|
||||
});
|
||||
return flattenedDirectives;
|
||||
}
|
||||
|
||||
export const FORM_PROVIDERS: Type[] = /*@ts2dart_const*/[RadioControlRegistry];
|
||||
|
||||
/**
|
||||
* Shorthand set of providers used for building reactive Angular forms.
|
||||
* @experimental
|
||||
*/
|
||||
export function disableDeprecatedForms(): any[] {
|
||||
return [{
|
||||
provide: CompilerConfig,
|
||||
useFactory: (platformDirectives: any[], platformPipes: any[]) => {
|
||||
const flattenedDirectives = flatten(platformDirectives);
|
||||
ListWrapper.remove(flattenedDirectives, OLD_FORM_DIRECTIVES);
|
||||
return new CompilerConfig({platformDirectives: flattenedDirectives, platformPipes});
|
||||
},
|
||||
deps: [PLATFORM_DIRECTIVES, PLATFORM_PIPES]
|
||||
}];
|
||||
export const REACTIVE_FORM_PROVIDERS: Type[] =
|
||||
/*@ts2dart_const*/[FormBuilder, RadioControlRegistry];
|
||||
|
||||
/**
|
||||
* The app module for forms.
|
||||
* @experimental
|
||||
*/
|
||||
@AppModule({providers: [FORM_PROVIDERS], directives: FORM_DIRECTIVES, pipes: []})
|
||||
export class FormsModule {
|
||||
}
|
||||
|
||||
/**
|
||||
* The app module for reactive forms.
|
||||
* @experimental
|
||||
*/
|
||||
export function provideForms(): any[] {
|
||||
return [
|
||||
{provide: PLATFORM_DIRECTIVES, useValue: NEW_FORM_DIRECTIVES, multi: true}, FORM_PROVIDERS
|
||||
];
|
||||
}
|
||||
@AppModule({providers: [REACTIVE_FORM_PROVIDERS], directives: REACTIVE_FORM_DIRECTIVES, pipes: []})
|
||||
export class ReactiveFormsModule {
|
||||
}
|
Reference in New Issue
Block a user