honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/@angular/common/src/common_directives.ts
View File

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

18
modules/@angular/common/src/forms-deprecated.ts
View File

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

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

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

29
modules/@angular/forms/src/directives.ts
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];

63
modules/@angular/forms/src/form_providers.ts
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 {
}

269
modules/@angular/forms/test/integration_spec.ts
View File

@ -10,11 +10,10 @@ import {NgFor, NgIf} from '@angular/common';
import {TestComponentBuilder} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
import {Input, Provider, forwardRef} from '@angular/core';
import {ComponentFixture} from '@angular/core/testing';
import {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, xdescribe, xit} from '@angular/core/testing/testing_internal';
import {AsyncTestCompleter} from '@angular/core/testing/testing_internal';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormArray, FormControl, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, REACTIVE_FORM_DIRECTIVES, Validator, Validators, disableDeprecatedForms, provideForms} from '@angular/forms';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormArray, FormControl, FormGroup, FormsModule, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, REACTIVE_FORM_DIRECTIVES, ReactiveFormsModule, Validator, Validators} from '@angular/forms';
import {By} from '@angular/platform-browser/src/dom/debug/by';
import {getDOM} from '@angular/platform-browser/src/dom/dom_adapter';
import {dispatchEvent} from '@angular/platform-browser/testing/browser_util';
@ -25,8 +24,8 @@ import {PromiseWrapper} from '../src/facade/promise';
export function main() {
describe('integration tests', () => {
let providerArr: any[];
beforeEach(() => { providerArr = [disableDeprecatedForms(), provideForms()]; });
beforeEach(() => { configureModule({modules: [FormsModule, ReactiveFormsModule]}); });
it('should initialize DOM elements with the given form object',
inject(
@ -36,10 +35,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'login': new FormControl('loginValue')});
fixture.detectChanges();
@ -58,10 +54,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges())
.toThrowError(new RegExp(`formGroup expects a FormGroup instance`));
async.done();
@ -78,10 +71,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -104,10 +94,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -203,10 +190,7 @@ export function main() {
const t = `<div><input type="text" [formControl]="form"></div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = control;
fixture.detectChanges();
@ -229,10 +213,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'login': new FormControl('oldValue')});
fixture.detectChanges();
@ -258,10 +239,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -286,10 +264,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -317,10 +292,7 @@ export function main() {
</div>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray;
fixture.detectChanges();
@ -355,10 +327,7 @@ export function main() {
</div>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.debugElement.componentInstance.cityArray = cityArray;
fixture.detectChanges();
@ -384,10 +353,7 @@ export function main() {
<input type="text" formControlName="text">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
@ -398,9 +364,7 @@ export function main() {
input.nativeElement.value = 'new';
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'text': 'new'
});
expect(fixture.debugElement.componentInstance.form.value).toEqual({'text': 'new'});
async.done();
});
}));
@ -413,10 +377,7 @@ export function main() {
<input formControlName="text">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
@ -426,9 +387,7 @@ export function main() {
input.nativeElement.value = 'new';
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'text': 'new'
});
expect(fixture.debugElement.componentInstance.form.value).toEqual({'text': 'new'});
async.done();
});
}));
@ -441,10 +400,7 @@ export function main() {
<textarea formControlName="text"></textarea>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'text': new FormControl('old')});
fixture.detectChanges();
@ -455,9 +411,7 @@ export function main() {
textarea.nativeElement.value = 'new';
dispatchEvent(textarea.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'text': 'new'
});
expect(fixture.debugElement.componentInstance.form.value).toEqual({'text': 'new'});
async.done();
});
}));
@ -470,10 +424,7 @@ export function main() {
<input type="checkbox" formControlName="checkbox">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'checkbox': new FormControl(true)});
fixture.detectChanges();
@ -499,10 +450,7 @@ export function main() {
<input type="number" formControlName="num">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'num': new FormControl(10)});
fixture.detectChanges();
@ -526,10 +474,7 @@ export function main() {
<input type="number" formControlName="num" required>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'num': new FormControl(10)});
fixture.detectChanges();
@ -539,9 +484,7 @@ export function main() {
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.valid).toBe(false);
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'num': null
});
expect(fixture.debugElement.componentInstance.form.value).toEqual({'num': null});
input.nativeElement.value = '0';
dispatchEvent(input.nativeElement, 'input');
@ -562,10 +505,7 @@ export function main() {
<input type="number" formControlName="num" [(ngModel)]="data">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.debugElement.componentInstance.data = null;
fixture.detectChanges();
@ -587,10 +527,7 @@ export function main() {
</form>`;
const ctrl = new FormControl('fish');
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = new FormGroup({'food': ctrl});
fixture.detectChanges();
@ -628,10 +565,7 @@ export function main() {
const foodCtrl = new FormControl('fish');
const drinkCtrl = new FormControl('sprite');
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'food': foodCtrl, 'drink': drinkCtrl});
fixture.detectChanges();
@ -672,15 +606,11 @@ export function main() {
<input type="radio" formControlName="food" name="drink" value="chicken">
</form>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'food': new FormControl('fish')});
expect(() => fixture.detectChanges())
.toThrowError(
new RegExp('If you define both a name and a formControlName'));
.toThrowError(new RegExp('If you define both a name and a formControlName'));
async.done();
});
}));
@ -703,10 +633,7 @@ export function main() {
const showRadio = new FormControl('yes');
const form = new FormGroup({'food': ctrl});
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.debugElement.componentInstance.showRadio = showRadio;
showRadio.valueChanges.subscribe((change) => {
@ -734,10 +661,7 @@ export function main() {
<option value="NYC"></option>
</select>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.detectChanges();
var select = fixture.debugElement.query(By.css('select'));
@ -759,10 +683,7 @@ export function main() {
</option>
</select>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'id': '0', 'name': 'SF'}, {'id': '1', 'name': 'NYC'}];
fixture.detectChanges();
@ -788,10 +709,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'city': new FormControl('SF')});
fixture.detectChanges();
@ -847,10 +765,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
@ -880,10 +795,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
@ -912,10 +824,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
@ -944,10 +853,7 @@ export function main() {
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
@ -974,10 +880,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp = fixture.debugElement.componentInstance;
@ -1006,10 +909,7 @@ export function main() {
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp = fixture.debugElement.componentInstance;
@ -1030,19 +930,14 @@ export function main() {
})));
it('when option values have same content, but different identities',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'NYC'}];
@ -1051,15 +946,15 @@ export function main() {
testComp.selectedCity = testComp.list[2];
fixture.detectChanges();
tick();
var select = fixture.debugElement.query(By.css('select'));
var secondNYC = fixture.debugElement.queryAll(By.css('option'))[2];
expect(select.nativeElement.value).toEqual('2: Object');
expect(secondNYC.nativeElement.selected).toBe(true);
async.done();
});
}));
})));
});
it('should support custom value accessors',
@ -1070,10 +965,7 @@ export function main() {
<input type="text" formControlName="name" wrapped-value>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
@ -1083,9 +975,7 @@ export function main() {
input.nativeElement.value = '!bb!';
dispatchEvent(input.nativeElement, 'input');
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'name': 'bb'
});
expect(fixture.debugElement.componentInstance.form.value).toEqual({'name': 'bb'});
async.done();
});
}));
@ -1098,10 +988,7 @@ export function main() {
<my-input formControlName="name"></my-input>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
@ -1138,10 +1025,7 @@ export function main() {
<input type="text" formControlName="max" maxlength="3">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -1214,10 +1098,7 @@ export function main() {
<input type="text" formControlName="login">
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
expect(form.valid).toEqual(true);
@ -1282,10 +1163,7 @@ export function main() {
</div>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -1308,10 +1186,7 @@ export function main() {
</div>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input'));
@ -1445,10 +1320,7 @@ export function main() {
const t = `<form ngNoForm>
</form>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.name = null;
fixture.detectChanges();
@ -1580,10 +1452,7 @@ export function main() {
<input [(ngModel)]="name">
</form>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges())
.toThrowError(new RegExp(`name attribute must be set`));
async.done();
@ -1598,10 +1467,7 @@ export function main() {
<input [(ngModel)]="name" [ngModelOptions]="{standalone: true}">
</form>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges()).not.toThrow();
async.done();
});
@ -1723,10 +1589,7 @@ export function main() {
const t = `<div><input type="text" [formControl]="form"></div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -1760,10 +1623,7 @@ export function main() {
const t =
`<form [formGroup]="form"><input type="text" formControlName="name"></form>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form;
fixture.detectChanges();
@ -1794,10 +1654,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div><input [(ngModel)]="name" required></div>`;
tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8)
.then((fixture) => {
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.name = '';
fixture.detectChanges();
@ -1860,20 +1717,20 @@ export function main() {
input.selectionStart = 1;
dispatchEvent(input, 'input');
tick();
fixture.detectChanges();
tick();
expect(fixture.debugElement.componentInstance.name).toEqual('aa');
// Programatically update the input value to be "bb".
// Programmatically update the input value to be "bb".
fixture.debugElement.componentInstance.name = 'bb';
tick();
fixture.detectChanges();
tick();
expect(input.value).toEqual('bb');
// Programatically set it back to "aa".
fixture.debugElement.componentInstance.name = 'aa';
tick();
fixture.detectChanges();
tick();
expect(input.value).toEqual('aa');
})));
it('should not crash when validity is checked from a binding',
@ -1972,11 +1829,7 @@ class UniqLoginValidator implements Validator {
@Component({
selector: 'my-comp',
template: '',
directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
REACTIVE_FORM_DIRECTIVES
],
providers: [FORM_PROVIDERS]
directives: [WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator]
})
class MyComp8 {
form: any;

4
modules/@angular/platform-browser/src/browser.ts
View File

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

4
tools/public_api_guard/common/index.d.ts vendored
View File

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

17
tools/public_api_guard/forms/index.d.ts vendored
View File

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