2016-06-23 12:47:54 -04: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-07-18 06:50:31 -04:00
|
|
|
import {NgModule, Type} from '@angular/core';
|
2016-06-08 19:38:52 -04:00
|
|
|
|
|
|
|
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
|
|
|
|
import {DefaultValueAccessor} from './directives/default_value_accessor';
|
2016-08-11 12:01:09 -04:00
|
|
|
import {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {NgForm} from './directives/ng_form';
|
2018-08-01 01:17:58 -04:00
|
|
|
import {NgFormSelectorWarning} from './directives/ng_form_selector_warning';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {NgModel} from './directives/ng_model';
|
2016-06-12 19:37:42 -04:00
|
|
|
import {NgModelGroup} from './directives/ng_model_group';
|
2017-02-20 19:36:48 -05:00
|
|
|
import {NgNoValidate} from './directives/ng_no_validate_directive';
|
2016-06-08 18:36:24 -04:00
|
|
|
import {NumberValueAccessor} from './directives/number_value_accessor';
|
|
|
|
import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
|
2016-10-19 13:12:13 -04:00
|
|
|
import {RangeValueAccessor} from './directives/range_value_accessor';
|
2016-06-10 22:10:17 -04:00
|
|
|
import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
|
2016-06-12 19:37:42 -04:00
|
|
|
import {FormControlName} from './directives/reactive_directives/form_control_name';
|
2016-06-10 22:10:17 -04:00
|
|
|
import {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
|
2016-08-02 12:40:42 -04:00
|
|
|
import {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
|
2016-06-08 19:38:52 -04:00
|
|
|
import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
|
|
|
|
import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
|
2017-06-19 19:26:43 -04:00
|
|
|
import {CheckboxRequiredValidator, EmailValidator, MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
|
2016-06-08 18:36:24 -04:00
|
|
|
|
2016-06-08 19:38:52 -04:00
|
|
|
export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
|
|
|
|
export {ControlValueAccessor} from './directives/control_value_accessor';
|
|
|
|
export {DefaultValueAccessor} from './directives/default_value_accessor';
|
|
|
|
export {NgControl} from './directives/ng_control';
|
2016-08-11 12:01:09 -04:00
|
|
|
export {NgControlStatus, NgControlStatusGroup} from './directives/ng_control_status';
|
2016-06-08 19:38:52 -04:00
|
|
|
export {NgForm} from './directives/ng_form';
|
2018-08-01 01:17:58 -04:00
|
|
|
export {NG_FORM_SELECTOR_WARNING, NgFormSelectorWarning} from './directives/ng_form_selector_warning';
|
2016-06-08 19:38:52 -04:00
|
|
|
export {NgModel} from './directives/ng_model';
|
2016-06-12 19:37:42 -04:00
|
|
|
export {NgModelGroup} from './directives/ng_model_group';
|
2016-06-08 18:36:24 -04:00
|
|
|
export {NumberValueAccessor} from './directives/number_value_accessor';
|
2016-06-15 18:15:41 -04:00
|
|
|
export {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
|
2016-10-19 13:12:13 -04:00
|
|
|
export {RangeValueAccessor} from './directives/range_value_accessor';
|
refactor(forms): deprecate ngModel usage on same field as formControl (#22633)
Support for using the `ngModel` input property and `ngModelChange`
event with reactive form directives has been deprecated in
Angular v6 and will be removed in Angular v7.
Now deprecated:
```html
<input [formControl]="control" [(ngModel)]="value">
```
```ts
this.value = 'some value';
```
This has been deprecated for a few reasons. First, developers have
found this pattern confusing. It seems like the actual `ngModel`
directive is being used, but in fact it's an input/output property
named `ngModel` on the reactive form directive that simply approximates
(some of) its behavior. Specifically, it allows getting/setting the
value and intercepting value events. However, some of `ngModel`'s other
features - like delaying updates with`ngModelOptions` or exporting the
directive - simply don't work, which has understandably caused some
confusion.
In addition, this pattern mixes template-driven and reactive forms
strategies, which we generally don't recommend because it doesn't take
advantage of the full benefits of either strategy. Setting the value in
the template violates the template-agnostic principles behind reactive
forms, whereas adding a FormControl/FormGroup layer in the class removes
the convenience of defining forms in the template.
To update your code before v7, you'll want to decide whether to stick
with reactive form directives (and get/set values using reactive forms
patterns) or switch over to template-driven directives.
After (choice 1 - use reactive forms):
```html
<input [formControl]="control">
```
```ts
this.control.setValue('some value');
```
After (choice 2 - use template-driven forms):
```html
<input [(ngModel)]="value">
```
```ts
this.value = 'some value';
```
You can also choose to silence this warning by providing a config for
`ReactiveFormsModule` at import time:
```ts
imports: [
ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'});
]
```
Alternatively, you can choose to surface a separate warning for each
instance of this pattern with a config value of `"always"`. This may
help to track down where in the code the pattern is being used as the
code is being updated.
Note: `warnOnNgModelWithFormControl` is set up as deprecated so that it
can be removed in v7 when it is no longer needed. This will not display
properly in API docs yet because dgeni doesn't yet support deprecating
properties in object literals, but we have an open issue to resolve the
discrepancy here: https://github.com/angular/angular/issues/22640.
PR Close #22633
2018-03-07 12:46:10 -05:00
|
|
|
export {FormControlDirective, NG_MODEL_WITH_FORM_CONTROL_WARNING} from './directives/reactive_directives/form_control_directive';
|
2016-06-12 19:37:42 -04:00
|
|
|
export {FormControlName} from './directives/reactive_directives/form_control_name';
|
2016-06-10 22:10:17 -04:00
|
|
|
export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
|
2016-08-02 12:40:42 -04:00
|
|
|
export {FormArrayName, FormGroupName} from './directives/reactive_directives/form_group_name';
|
2016-06-08 19:38:52 -04:00
|
|
|
export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
|
|
|
|
export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
|
|
|
|
|
2016-08-10 21:21:28 -04:00
|
|
|
export const SHARED_FORM_DIRECTIVES: Type<any>[] = [
|
2017-02-20 19:36:48 -05:00
|
|
|
NgNoValidate,
|
2016-12-10 05:44:04 -05:00
|
|
|
NgSelectOption,
|
|
|
|
NgSelectMultipleOption,
|
|
|
|
DefaultValueAccessor,
|
|
|
|
NumberValueAccessor,
|
|
|
|
RangeValueAccessor,
|
|
|
|
CheckboxControlValueAccessor,
|
|
|
|
SelectControlValueAccessor,
|
|
|
|
SelectMultipleControlValueAccessor,
|
|
|
|
RadioControlValueAccessor,
|
|
|
|
NgControlStatus,
|
|
|
|
NgControlStatusGroup,
|
|
|
|
RequiredValidator,
|
|
|
|
MinLengthValidator,
|
|
|
|
MaxLengthValidator,
|
|
|
|
PatternValidator,
|
|
|
|
CheckboxRequiredValidator,
|
2016-12-29 12:07:02 -05:00
|
|
|
EmailValidator,
|
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 14:32:51 -04:00
|
|
|
];
|
2016-06-08 18:36:24 -04:00
|
|
|
|
2018-08-01 01:17:58 -04:00
|
|
|
export const TEMPLATE_DRIVEN_DIRECTIVES: Type<any>[] =
|
|
|
|
[NgModel, NgModelGroup, NgForm, NgFormSelectorWarning];
|
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 14:32:51 -04:00
|
|
|
|
2016-08-10 21:21:28 -04:00
|
|
|
export const REACTIVE_DRIVEN_DIRECTIVES: Type<any>[] =
|
2016-07-30 22:18:14 -04:00
|
|
|
[FormControlDirective, FormGroupDirective, FormControlName, FormGroupName, FormArrayName];
|
2016-06-10 20:28:19 -04:00
|
|
|
|
2016-07-18 06:50:31 -04:00
|
|
|
/**
|
|
|
|
* Internal module used for sharing directives between FormsModule and ReactiveFormsModule
|
|
|
|
*/
|
2016-11-14 19:44:25 -05:00
|
|
|
@NgModule({
|
|
|
|
declarations: SHARED_FORM_DIRECTIVES,
|
|
|
|
exports: SHARED_FORM_DIRECTIVES,
|
|
|
|
})
|
2016-07-18 06:50:31 -04:00
|
|
|
export class InternalFormsSharedModule {
|
|
|
|
}
|