2016-06-23 09:47:54 -07:00
|
|
|
/**
|
|
|
|
* @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
|
|
|
|
*/
|
|
|
|
|
2016-04-28 17:50:03 -07:00
|
|
|
import {Type} from '@angular/core';
|
2016-06-08 16:38:52 -07:00
|
|
|
|
2015-11-05 14:58:24 -08:00
|
|
|
import {CORE_DIRECTIVES} from './directives';
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A collection of Angular core directives that are likely to be used in each and every Angular
|
|
|
|
* application. This includes core directives (e.g., NgIf and NgFor), and forms directives (e.g.,
|
|
|
|
* NgModel).
|
|
|
|
*
|
|
|
|
* This collection can be used to quickly enumerate all the built-in directives in the `directives`
|
2016-03-08 13:36:48 -08:00
|
|
|
* property of the `@Component` decorator.
|
2015-11-05 14:58:24 -08:00
|
|
|
*
|
|
|
|
* ### Example
|
|
|
|
*
|
|
|
|
* Instead of writing:
|
|
|
|
*
|
|
|
|
* ```typescript
|
|
|
|
* import {NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, NgModel, NgForm} from
|
2016-04-28 17:50:03 -07:00
|
|
|
* '@angular/common';
|
2015-11-05 14:58:24 -08:00
|
|
|
* import {OtherDirective} from './myDirectives';
|
|
|
|
*
|
|
|
|
* @Component({
|
|
|
|
* selector: 'my-component',
|
|
|
|
* templateUrl: 'myComponent.html',
|
|
|
|
* directives: [NgClass, NgIf, NgFor, NgSwitch, NgSwitchWhen, NgSwitchDefault, NgModel, NgForm,
|
|
|
|
* OtherDirective]
|
|
|
|
* })
|
|
|
|
* export class MyComponent {
|
|
|
|
* ...
|
|
|
|
* }
|
|
|
|
* ```
|
|
|
|
* one could import all the common directives at once:
|
|
|
|
*
|
|
|
|
* ```typescript
|
2016-04-28 17:50:03 -07:00
|
|
|
* import {COMMON_DIRECTIVES} from '@angular/common';
|
2015-11-05 14:58:24 -08:00
|
|
|
* import {OtherDirective} from './myDirectives';
|
|
|
|
*
|
|
|
|
* @Component({
|
|
|
|
* selector: 'my-component',
|
|
|
|
* templateUrl: 'myComponent.html',
|
|
|
|
* directives: [COMMON_DIRECTIVES, OtherDirective]
|
|
|
|
* })
|
|
|
|
* export class MyComponent {
|
|
|
|
* ...
|
|
|
|
* }
|
|
|
|
* ```
|
2016-05-27 11:24:05 -07:00
|
|
|
*
|
|
|
|
* @experimental Contains forms which are experimental.
|
2015-11-05 14:58:24 -08:00
|
|
|
*/
|
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
```
2016-07-07 11:32:51 -07:00
|
|
|
export const COMMON_DIRECTIVES: Type[][] = /*@ts2dart_const*/[CORE_DIRECTIVES];
|