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
```

modules/@angular/common/src/common_directives.ts

@@ -9,8 +9,6 @@
 import {Type} from '@angular/core';
 
 import {CORE_DIRECTIVES} from './directives';
-import {FORM_DIRECTIVES} from './forms-deprecated';
-
 
 /**
  * A collection of Angular core directives that are likely to be used in each and every Angular
@@ -57,4 +55,4 @@ import {FORM_DIRECTIVES} from './forms-deprecated';
  *
  * @experimental Contains forms which are experimental.
  */
-export const COMMON_DIRECTIVES: Type[][] = /*@ts2dart_const*/[CORE_DIRECTIVES, FORM_DIRECTIVES];
+export const COMMON_DIRECTIVES: Type[][] = /*@ts2dart_const*/[CORE_DIRECTIVES];

modules/@angular/common/src/forms-deprecated.ts

@@ -18,8 +18,9 @@
  * Forms providers are not included in default providers; you must import these providers
  * explicitly.
  */
-import {Type} from '@angular/core';
+import {AppModule, Type} from '@angular/core';
 
+import {FORM_DIRECTIVES} from './forms-deprecated/directives';
 import {RadioControlRegistry} from './forms-deprecated/directives/radio_control_value_accessor';
 import {FormBuilder} from './forms-deprecated/form_builder';
 
@@ -57,3 +58,18 @@ export {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from './forms-deprecated
  * @experimental
  */
 export const FORM_PROVIDERS: Type[] = /*@ts2dart_const*/[FormBuilder, RadioControlRegistry];
+
+
+/**
+ * The app module for the deprecated forms API.
+ * @deprecated
+ */
+@AppModule({
+  providers: [
+    FORM_PROVIDERS,
+  ],
+  directives: FORM_DIRECTIVES,
+  pipes: []
+})
+export class DeprecatedFormsModule {
+}

modules/@angular/common/test/forms-deprecated/integration_spec.ts

@@ -7,11 +7,11 @@
  */
 
 import {NgFor, NgIf} from '@angular/common';
-import {Control, ControlGroup, ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, RadioButtonState, Validator, Validators} from '@angular/common/src/forms-deprecated';
+import {Control, ControlGroup, ControlValueAccessor, DeprecatedFormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, RadioButtonState, Validator, Validators} from '@angular/common/src/forms-deprecated';
 import {TestComponentBuilder} from '@angular/compiler/testing';
 import {Component, Directive, EventEmitter, Output} from '@angular/core';
 import {Input, Provider, forwardRef} from '@angular/core';
-import {ComponentFixture, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
+import {ComponentFixture, configureModule, fakeAsync, flushMicrotasks, tick} from '@angular/core/testing';
 import {afterEach, beforeEach, ddescribe, describe, expect, iit, inject, it, xit} from '@angular/core/testing/testing_internal';
 import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
 import {By} from '@angular/platform-browser/src/dom/debug/by';
@@ -25,6 +25,8 @@ import {PromiseWrapper} from '../../src/facade/promise';
 export function main() {
   describe('integration tests', () => {
 
+    beforeEach(() => {configureModule({modules: [DeprecatedFormsModule]})});
+
     it('should initialize DOM elements with the given form object',
        inject(
            [TestComponentBuilder, AsyncTestCompleter],
@@ -1548,10 +1550,7 @@ class UniqLoginValidator implements Validator {
 @Component({
   selector: 'my-comp',
   template: '',
-  directives: [
-    FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator
-  ],
-  providers: [FORM_PROVIDERS]
+  directives: [WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator]
 })
 class MyComp8 {
   form: any;

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

@@ -44,7 +44,18 @@ export {NgSelectOption, SelectControlValueAccessor} from './directives/select_co
 export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
 export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
 
+const SHARED_FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
+  NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
+  CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
+  RadioControlValueAccessor, NgControlStatus, RequiredValidator, MinLengthValidator,
+  MaxLengthValidator, PatternValidator
+];
 
+const TEMPLATE_DRIVEN_DIRECTIVES: Type[] = /*@ts2dart_const*/[NgModel, NgModelGroup, NgForm];
+
+const REACTIVE_DRIVEN_DIRECTIVES: Type[] = /*@ts2dart_const*/[
+  FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName
+];
 
 /**
  *
@@ -63,20 +74,12 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
  * ```
  * @experimental
  */
-export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
-  NgModel, NgModelGroup, NgForm,
-
-  NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
-  CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
-  RadioControlValueAccessor, NgControlStatus,
-
-  RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator
-];
+export const FORM_DIRECTIVES: Type[][] =
+    /*@ts2dart_const*/[TEMPLATE_DRIVEN_DIRECTIVES, SHARED_FORM_DIRECTIVES];
 
 /**
  * @experimental
  */
-export const REACTIVE_FORM_DIRECTIVES: Type[] =
-    /*@ts2dart_const*/[
-      FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName
-    ];
+
+export const REACTIVE_FORM_DIRECTIVES: Type[][] =
+    /*@ts2dart_const*/[REACTIVE_DRIVEN_DIRECTIVES, SHARED_FORM_DIRECTIVES];

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

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

modules/@angular/platform-browser/src/browser.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {COMMON_DIRECTIVES, COMMON_PIPES, FORM_PROVIDERS, PlatformLocation} from '@angular/common';
+import {COMMON_DIRECTIVES, COMMON_PIPES, PlatformLocation} from '@angular/common';
 import {APPLICATION_COMMON_PROVIDERS, AppModule, AppModuleFactory, AppModuleRef, ExceptionHandler, NgZone, OpaqueToken, PLATFORM_COMMON_PROVIDERS, PLATFORM_INITIALIZER, PlatformRef, ReflectiveInjector, RootRenderer, SanitizationService, Testability, assertPlatform, createPlatform, getPlatform, isDevMode} from '@angular/core';
 
 import {wtfInit} from '../core_private';
@@ -62,7 +62,7 @@ export const BROWSER_SANITIZATION_PROVIDERS: Array<any> = [
  * @experimental API related to bootstrapping are still under review.
  */
 export const BROWSER_APP_PROVIDERS: Array<any /*Type | Provider | any[]*/> = [
-  APPLICATION_COMMON_PROVIDERS, FORM_PROVIDERS, BROWSER_SANITIZATION_PROVIDERS,
+  APPLICATION_COMMON_PROVIDERS, BROWSER_SANITIZATION_PROVIDERS,
   {provide: ExceptionHandler, useFactory: _exceptionHandler, deps: []},
   {provide: DOCUMENT, useFactory: _document, deps: []},
   {provide: EVENT_MANAGER_PLUGINS, useClass: DomEventsPlugin, multi: true},

tools/public_api_guard/common/index.d.ts

@@ -162,6 +162,10 @@ export declare class DefaultValueAccessor implements ControlValueAccessor {
     writeValue(value: any): void;
 }
 
+/** @deprecated */
+export declare class DeprecatedFormsModule {
+}
+
 /** @experimental */
 export interface Form {
     addControl(dir: NgControl): void;

tools/public_api_guard/forms/index.d.ts

@@ -101,9 +101,6 @@ export declare class DefaultValueAccessor implements ControlValueAccessor {
     writeValue(value: any): void;
 }
 
-/** @experimental */
-export declare function disableDeprecatedForms(): any[];
-
 /** @experimental */
 export interface Form {
     addControl(dir: NgControl): void;
@@ -116,7 +113,7 @@ export interface Form {
 }
 
 /** @experimental */
-export declare const FORM_DIRECTIVES: Type[];
+export declare const FORM_DIRECTIVES: Type[][];
 
 /** @experimental */
 export declare const FORM_PROVIDERS: Type[];
@@ -246,6 +243,10 @@ export declare class FormGroupName extends AbstractFormGroupDirective implements
     constructor(parent: ControlContainer, validators: any[], asyncValidators: any[]);
 }
 
+/** @experimental */
+export declare class FormsModule {
+}
+
 /** @experimental */
 export declare class MaxLengthValidator implements Validator {
     constructor(maxLength: string);
@@ -358,10 +359,14 @@ export declare class PatternValidator implements Validator {
 }
 
 /** @experimental */
-export declare function provideForms(): any[];
+export declare const REACTIVE_FORM_DIRECTIVES: Type[][];
 
 /** @experimental */
-export declare const REACTIVE_FORM_DIRECTIVES: Type[];
+export declare const REACTIVE_FORM_PROVIDERS: Type[];
+
+/** @experimental */
+export declare class ReactiveFormsModule {
+}
 
 /** @experimental */
 export declare class RequiredValidator {