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:
Kara
2016-07-07 11:32:51 -07:00
committed by GitHub
parent 776a83f9da
commit 9d265b6f61
9 changed files with 606 additions and 755 deletions

View File

@ -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 {
}