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

@ -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];