cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(forms): rename ngFormModel to formGroup

Browse Source
This commit is contained in:
Kara Erickson 2016-06-10 19:10:17 -07:00
parent d53edfec47
commit 7d9c1e1225
12 changed files with 138 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
modules/@angular/common/src/forms.ts
View File

@ -16,21 +16,21 @@ import {Type} from '@angular/core';
import {RadioControlRegistry} from './forms/directives/radio_control_value_accessor'; import {RadioControlRegistry} from './forms/directives/radio_control_value_accessor';
import {FormBuilder} from './forms/form_builder'; import {FormBuilder} from './forms/form_builder';
export {FORM_DIRECTIVES, RadioButtonState} from './forms/directives'; export {FORM_DIRECTIVES, REACTIVE_FORM_DIRECTIVES, RadioButtonState} from './forms/directives';
export {AbstractControlDirective} from './forms/directives/abstract_control_directive'; export {AbstractControlDirective} from './forms/directives/abstract_control_directive';
export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_accessor'; export {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_accessor';
export {ControlContainer} from './forms/directives/control_container'; export {ControlContainer} from './forms/directives/control_container';
export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_value_accessor'; export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_value_accessor';
export {DefaultValueAccessor} from './forms/directives/default_value_accessor'; export {DefaultValueAccessor} from './forms/directives/default_value_accessor';
export {FormControlDirective} from './forms/directives/form_control_directive';
export {Form} from './forms/directives/form_interface'; export {Form} from './forms/directives/form_interface';
export {NgControl} from './forms/directives/ng_control'; export {NgControl} from './forms/directives/ng_control';
export {NgControlGroup} from './forms/directives/ng_control_group'; export {NgControlGroup} from './forms/directives/ng_control_group';
export {NgControlName} from './forms/directives/ng_control_name'; export {NgControlName} from './forms/directives/ng_control_name';
export {NgControlStatus} from './forms/directives/ng_control_status'; export {NgControlStatus} from './forms/directives/ng_control_status';
export {NgForm} from './forms/directives/ng_form'; export {NgForm} from './forms/directives/ng_form';
export {NgFormModel} from './forms/directives/ng_form_model';
export {NgModel} from './forms/directives/ng_model'; export {NgModel} from './forms/directives/ng_model';
export {FormControlDirective} from './forms/directives/reactive_directives/form_control_directive';
export {FormGroupDirective} from './forms/directives/reactive_directives/form_group_directive';
export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor'; export {NgSelectOption, SelectControlValueAccessor} from './forms/directives/select_control_value_accessor';
export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators'; export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators';
export {FormBuilder} from './forms/form_builder'; export {FormBuilder} from './forms/form_builder';

13
modules/@angular/common/src/forms/directives.ts
View File

@ -2,15 +2,15 @@ import {Type} from '@angular/core';
import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor'; import {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
import {DefaultValueAccessor} from './directives/default_value_accessor'; import {DefaultValueAccessor} from './directives/default_value_accessor';
import {FormControlDirective} from './directives/form_control_directive';
import {NgControlGroup} from './directives/ng_control_group'; import {NgControlGroup} from './directives/ng_control_group';
import {NgControlName} from './directives/ng_control_name'; import {NgControlName} from './directives/ng_control_name';
import {NgControlStatus} from './directives/ng_control_status'; import {NgControlStatus} from './directives/ng_control_status';
import {NgForm} from './directives/ng_form'; import {NgForm} from './directives/ng_form';
import {NgFormModel} from './directives/ng_form_model';
import {NgModel} from './directives/ng_model'; import {NgModel} from './directives/ng_model';
import {NumberValueAccessor} from './directives/number_value_accessor'; import {NumberValueAccessor} from './directives/number_value_accessor';
import {RadioControlValueAccessor} from './directives/radio_control_value_accessor'; import {RadioControlValueAccessor} from './directives/radio_control_value_accessor';
import {FormControlDirective} from './directives/reactive_directives/form_control_directive';
import {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor'; import {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; import {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators'; import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
@ -18,16 +18,16 @@ import {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor'; export {CheckboxControlValueAccessor} from './directives/checkbox_value_accessor';
export {ControlValueAccessor} from './directives/control_value_accessor'; export {ControlValueAccessor} from './directives/control_value_accessor';
export {DefaultValueAccessor} from './directives/default_value_accessor'; export {DefaultValueAccessor} from './directives/default_value_accessor';
export {FormControlDirective} from './directives/form_control_directive';
export {NgControl} from './directives/ng_control'; export {NgControl} from './directives/ng_control';
export {NgControlGroup} from './directives/ng_control_group'; export {NgControlGroup} from './directives/ng_control_group';
export {NgControlName} from './directives/ng_control_name'; export {NgControlName} from './directives/ng_control_name';
export {NgControlStatus} from './directives/ng_control_status'; export {NgControlStatus} from './directives/ng_control_status';
export {NgForm} from './directives/ng_form'; export {NgForm} from './directives/ng_form';
export {NgFormModel} from './directives/ng_form_model';
export {NgModel} from './directives/ng_model'; export {NgModel} from './directives/ng_model';
export {NumberValueAccessor} from './directives/number_value_accessor'; export {NumberValueAccessor} from './directives/number_value_accessor';
export {RadioButtonState, RadioControlValueAccessor} from './directives/radio_control_value_accessor'; export {RadioButtonState, RadioControlValueAccessor} from './directives/radio_control_value_accessor';
export {FormControlDirective} from './directives/reactive_directives/form_control_directive';
export {FormGroupDirective} from './directives/reactive_directives/form_group_directive';
export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor'; export {NgSelectOption, SelectControlValueAccessor} from './directives/select_control_value_accessor';
export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor'; export {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators'; export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
@ -54,7 +54,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
NgControlName, NgControlGroup, NgControlName, NgControlGroup,
NgModel, NgFormModel, NgForm, NgModel, NgForm,
NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor, NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
@ -62,3 +62,6 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator RequiredValidator, MinLengthValidator, MaxLengthValidator, PatternValidator
]; ];
export const REACTIVE_FORM_DIRECTIVES: Type[] =
/*@ts2dart_const*/[FormControlDirective, FormGroupDirective];

4
modules/@angular/common/src/forms/directives/form_interface.ts
View File

@ -5,7 +5,7 @@ import {NgControlGroup} from './ng_control_group';
/** /**
* An interface that {@link NgFormModel} and {@link NgForm} implement. * An interface that {@link FormGroupDirective} and {@link NgForm} implement.
* *
* Only used by the forms module. * Only used by the forms module.
* *
@ -23,7 +23,7 @@ export interface Form {
removeControl(dir: NgControl): void; removeControl(dir: NgControl): void;
/** /**
* Look up the {@link Control} associated with a particular {@link NgControl}. * Look up the {@link FormControl} associated with a particular {@link NgControl}.
*/ */
getControl(dir: NgControl): FormControl; getControl(dir: NgControl): FormControl;

4
modules/@angular/common/src/forms/directives/ng_control_group.ts
View File

@ -17,9 +17,7 @@ export const controlGroupProvider: any =
/** /**
* Creates and binds a control group to a DOM element. * Creates and binds a control group to a DOM element.
* *
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}. * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}.
*
* ### Example ([live demo](http://plnkr.co/edit/7EJ11uGeaggViYM6T5nq?p=preview))
* *
* ```typescript * ```typescript
* @Component({ * @Component({

4
modules/@angular/common/src/forms/directives/ng_control_name.ts
View File

@ -18,9 +18,9 @@ export const controlNameBinding: any =
}; };
/** /**
* Creates and binds a control with a specified name to a DOM element. * Creates and binds a form control with a specified name to a DOM element.
* *
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}. * This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}.
* ### Example * ### Example
* *

2
modules/@angular/common/src/forms/directives/ng_form.ts
View File

@ -77,7 +77,7 @@ export const formDirectiveProvider: any =
* @experimental * @experimental
*/ */
@Directive({ @Directive({
selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]', selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
providers: [formDirectiveProvider], providers: [formDirectiveProvider],
host: { host: {
'(submit)': 'onSubmit()', '(submit)': 'onSubmit()',

16
modules/@angular/common/src/forms/directives/form_control_directive.ts → modules/@angular/common/src/forms/directives/reactive_directives/form_control_directive.ts
View File

@ -1,14 +1,14 @@
import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core'; import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../../facade/async'; import {EventEmitter, ObservableWrapper} from '../../../facade/async';
import {StringMapWrapper} from '../../facade/collection'; import {StringMapWrapper} from '../../../facade/collection';
import {FormControl} from '../model'; import {FormControl} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
import {NgControl} from './ng_control'; import {NgControl} from '../ng_control';
import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from './shared'; import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from '../shared';
import {AsyncValidatorFn, ValidatorFn} from './validators'; import {AsyncValidatorFn, ValidatorFn} from '../validators';
export const formControlBinding: any = export const formControlBinding: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ { /*@ts2dart_const*/ /* @ts2dart_Provider */ {

51
modules/@angular/common/src/forms/directives/ng_form_model.ts → modules/@angular/common/src/forms/directives/reactive_directives/form_group_directive.ts
View File

@ -1,26 +1,26 @@
import {Directive, Inject, OnChanges, Optional, Self, SimpleChanges, forwardRef} from '@angular/core'; import {Directive, Inject, Input, OnChanges, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../../facade/async'; import {EventEmitter, ObservableWrapper} from '../../../facade/async';
import {ListWrapper, StringMapWrapper} from '../../facade/collection'; import {ListWrapper, StringMapWrapper} from '../../../facade/collection';
import {BaseException} from '../../facade/exceptions'; import {BaseException} from '../../../facade/exceptions';
import {isBlank} from '../../facade/lang'; import {isBlank} from '../../../facade/lang';
import {FormControl, FormGroup} from '../model'; import {FormControl, FormGroup} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../validators'; import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
import {ControlContainer} from './control_container'; import {ControlContainer} from '../control_container';
import {Form} from './form_interface'; import {Form} from '../form_interface';
import {NgControl} from './ng_control'; import {NgControl} from '../ng_control';
import {NgControlGroup} from './ng_control_group'; import {NgControlGroup} from '../ng_control_group';
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared'; import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from '../shared';
export const formDirectiveProvider: any = export const formDirectiveProvider: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ { /*@ts2dart_const*/ /* @ts2dart_Provider */ {
provide: ControlContainer, provide: ControlContainer,
useExisting: forwardRef(() => NgFormModel) useExisting: forwardRef(() => FormGroupDirective)
}; };
/** /**
* Binds an existing control group to a DOM element. * Binds an existing form group to a DOM element.
* *
* ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview)) * ### Example ([live demo](http://plnkr.co/edit/jqrVirudY8anJxTMUjTP?p=preview))
* *
@ -32,8 +32,8 @@ export const formDirectiveProvider: any =
* selector: 'my-app', * selector: 'my-app',
* template: ` * template: `
* <div> * <div>
* <h2>NgFormModel Example</h2> * <h2>Binding an existing form group</h2>
* <form [ngFormModel]="loginForm"> * <form [formGroup]="loginForm">
* <p>Login: <input type="text" ngControl="login"></p> * <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p> * <p>Password: <input type="password" ngControl="password"></p>
* </form> * </form>
@ -66,7 +66,7 @@ export const formDirectiveProvider: any =
* selector: "login-comp", * selector: "login-comp",
* directives: [FORM_DIRECTIVES], * directives: [FORM_DIRECTIVES],
* template: ` * template: `
* <form [ngFormModel]='loginForm'> * <form [formGroup]='loginForm'>
* Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'> * Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
* Password <input type='password' ngControl='password' * Password <input type='password' ngControl='password'
* [(ngModel)]='credentials.password'> * [(ngModel)]='credentials.password'>
@ -94,20 +94,18 @@ export const formDirectiveProvider: any =
* @experimental * @experimental
*/ */
@Directive({ @Directive({
selector: '[ngFormModel]', selector: '[formGroup]',
providers: [formDirectiveProvider], providers: [formDirectiveProvider],
inputs: ['form: ngFormModel'],
host: {'(submit)': 'onSubmit()'}, host: {'(submit)': 'onSubmit()'},
outputs: ['ngSubmit'],
exportAs: 'ngForm' exportAs: 'ngForm'
}) })
export class NgFormModel extends ControlContainer implements Form, export class FormGroupDirective extends ControlContainer implements Form,
OnChanges { OnChanges {
private _submitted: boolean = false; private _submitted: boolean = false;
form: FormGroup = null;
directives: NgControl[] = []; directives: NgControl[] = [];
ngSubmit = new EventEmitter();
@Input('formGroup') form: FormGroup = null;
@Output() ngSubmit = new EventEmitter();
constructor( constructor(
@Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[], @Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[],
@ -181,8 +179,9 @@ export class NgFormModel extends ControlContainer implements Form,
private _checkFormPresent() { private _checkFormPresent() {
if (isBlank(this.form)) { if (isBlank(this.form)) {
throw new BaseException( throw new BaseException(`formGroup expects a FormGroup instance. Please pass one in.
`ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">`); Example: <form [formGroup]="myFormGroup">
`);
} }
} }
} }

4
modules/@angular/common/src/forms/form_builder.ts
View File

@ -11,14 +11,12 @@ import * as modelModule from './model';
/** /**
* Creates a form object from a user-specified configuration. * Creates a form object from a user-specified configuration.
* *
* ### Example ([live demo](http://plnkr.co/edit/ENgZo8EuIECZNensZCVr?p=preview))
*
* ```typescript * ```typescript
* @Component({ * @Component({
* selector: 'my-app', * selector: 'my-app',
* viewProviders: [FORM_BINDINGS] * viewProviders: [FORM_BINDINGS]
* template: ` * template: `
* <form [ngFormModel]="loginForm"> * <form [formGroup]="loginForm">
* <p>Login <input ngControl="login"></p> * <p>Login <input ngControl="login"></p>
* <div ngControlGroup="passwordRetry"> * <div ngControlGroup="passwordRetry">
* <p>Password <input type="password" ngControl="password"></p> * <p>Password <input type="password" ngControl="password"></p>

4
modules/@angular/common/src/forms/model.ts
View File

@ -264,8 +264,8 @@ export abstract class AbstractControl {
* ## Usage * ## Usage
* *
* By default, a `FormControl` is created for every `<input>` or other form component. * By default, a `FormControl` is created for every `<input>` or other form component.
* With {@link FormControlDirective} or {@link NgFormModel} an existing {@link FormControl} can be * With {@link FormControlDirective} or {@link FormGroupDirective} an existing {@link FormControl}
* bound to a DOM element instead. This `FormControl` can be configured with a custom * can be bound to a DOM element instead. This `FormControl` can be configured with a custom
* validation function. * validation function.
* *
* @experimental * @experimental

14
modules/@angular/common/test/forms/directives_spec.ts
View File

@ -4,7 +4,7 @@ import {fakeAsync, flushMicrotasks, Log, tick,} from '@angular/core/testing';
import {SpyNgControl, SpyValueAccessor} from '../spies'; import {SpyNgControl, SpyValueAccessor} from '../spies';
import {FormGroup, FormControl, NgControlName, NgControlGroup, NgFormModel, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms'; import {FormGroup, FormControl, NgControlName, NgControlGroup, FormGroupDirective, ControlValueAccessor, Validators, NgForm, NgModel, FormControlDirective, NgControl, DefaultValueAccessor, CheckboxControlValueAccessor, SelectControlValueAccessor, Validator} from '@angular/common/src/forms';
import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared'; import {selectValueAccessor, composeValidators} from '@angular/common/src/forms/directives/shared';
@ -105,13 +105,13 @@ export function main() {
}); });
}); });
describe('NgFormModel', () => { describe('formGroup', () => {
var form: any /** TODO #9100 */; var form: any /** TODO #9100 */;
var formModel: FormGroup; var formModel: FormGroup;
var loginControlDir: any /** TODO #9100 */; var loginControlDir: any /** TODO #9100 */;
beforeEach(() => { beforeEach(() => {
form = new NgFormModel([], []); form = new FormGroupDirective([], []);
formModel = new FormGroup({ formModel = new FormGroup({
'login': new FormControl(), 'login': new FormControl(),
'passwords': new FormGroup( 'passwords': new FormGroup(
@ -242,7 +242,7 @@ export function main() {
it('should set up a sync validator', () => { it('should set up a sync validator', () => {
var formValidator = (c: any /** TODO #9100 */) => ({'custom': true}); var formValidator = (c: any /** TODO #9100 */) => ({'custom': true});
var f = new NgFormModel([formValidator], []); var f = new FormGroupDirective([formValidator], []);
f.form = formModel; f.form = formModel;
f.ngOnChanges({'form': new SimpleChange(null, null)}); f.ngOnChanges({'form': new SimpleChange(null, null)});
@ -250,7 +250,7 @@ export function main() {
}); });
it('should set up an async validator', fakeAsync(() => { it('should set up an async validator', fakeAsync(() => {
var f = new NgFormModel([], [asyncValidator('expected')]); var f = new FormGroupDirective([], [asyncValidator('expected')]);
f.form = formModel; f.form = formModel;
f.ngOnChanges({'form': new SimpleChange(null, null)}); f.ngOnChanges({'form': new SimpleChange(null, null)});
@ -345,7 +345,7 @@ export function main() {
beforeEach(() => { beforeEach(() => {
formModel = new FormGroup({'login': new FormControl(null)}); formModel = new FormGroup({'login': new FormControl(null)});
var parent = new NgFormModel([], []); var parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'group': formModel}); parent.form = new FormGroup({'group': formModel});
controlGroupDir = new NgControlGroup(parent, [], []); controlGroupDir = new NgControlGroup(parent, [], []);
controlGroupDir.name = 'group'; controlGroupDir.name = 'group';
@ -447,7 +447,7 @@ export function main() {
beforeEach(() => { beforeEach(() => {
formModel = new FormControl('name'); formModel = new FormControl('name');
var parent = new NgFormModel([], []); var parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'name': formModel}); parent.form = new FormGroup({'name': formModel});
controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]); controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
controlNameDir.name = 'name'; controlNameDir.name = 'name';

157
modules/@angular/common/test/forms/integration_spec.ts
View File

@ -1,5 +1,5 @@
import {NgFor, NgIf} from '@angular/common'; import {NgFor, NgIf} from '@angular/common';
import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms'; import {ControlValueAccessor, FORM_DIRECTIVES, FORM_PROVIDERS, FormControl, FormControlDirective, FormGroup, FormGroupDirective, NG_ASYNC_VALIDATORS, NG_VALIDATORS, NgControl, NgForm, NgModel, RadioButtonState, Validator, Validators} from '@angular/common/src/forms';
import {TestComponentBuilder} from '@angular/compiler/testing'; import {TestComponentBuilder} from '@angular/compiler/testing';
import {ComponentFixture} from '@angular/compiler/testing'; import {ComponentFixture} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core'; import {Component, Directive, EventEmitter, Output} from '@angular/core';
@ -22,7 +22,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -37,17 +37,17 @@ export function main() {
}); });
})); }));
it('should throw if a form isn\'t passed into ngFormModel', it('should throw if a form isn\'t passed into formGroup',
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => { tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges()) expect(() => fixture.detectChanges())
.toThrowError(new RegExp(`ngFormModel expects a form. Please pass one in.`)); .toThrowError(new RegExp(`formGroup expects a FormGroup instance`));
async.done(); async.done();
}); });
})); }));
@ -58,7 +58,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'login': new FormControl('oldValue')}); var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -81,7 +81,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'login': new FormControl('oldValue')}); var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -102,8 +102,8 @@ export function main() {
it('should emit ngSubmit event on submit', it('should emit ngSubmit event on submit',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div> const t = `<div>
<form [ngFormModel]="form" (ngSubmit)="name='updated'"></form> <form [formGroup]="form" (ngSubmit)="name='updated'"></form>
<span>{{name}}</span> <span>{{name}}</span>
</div>`; </div>`;
@ -124,7 +124,7 @@ export function main() {
it('should mark NgForm as submitted on submit event', it('should mark NgForm as submitted on submit event',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div> const t = `<div>
<form #f="ngForm" (ngSubmit)="data=f.submitted"></form> <form #f="ngForm" (ngSubmit)="data=f.submitted"></form>
<span>{{data}}</span> <span>{{data}}</span>
</div>`; </div>`;
@ -147,10 +147,10 @@ export function main() {
expect(fixture.debugElement.componentInstance.data).toEqual(true); expect(fixture.debugElement.componentInstance.data).toEqual(true);
}))); })));
it('should mark NgFormModel as submitted on submit event', it('should mark formGroup as submitted on submit event',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => { inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div> const t = `<div>
<form #f="ngForm" [ngFormModel]="form" (ngSubmit)="data=f.submitted"></form> <form #f="ngForm" [formGroup]="form" (ngSubmit)="data=f.submitted"></form>
<span>{{data}}</span> <span>{{data}}</span>
</div>`; </div>`;
@ -200,7 +200,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -226,7 +226,7 @@ export function main() {
var login = new FormControl('oldValue'); var login = new FormControl('oldValue');
var form = new FormGroup({'login': login}); var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -251,7 +251,7 @@ export function main() {
var login = new FormControl('oldValue'); var login = new FormControl('oldValue');
var form = new FormGroup({'login': login}); var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -275,7 +275,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="text"> <input type="text" ngControl="text">
</div>`; </div>`;
@ -299,7 +299,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input ngControl="text"> <input ngControl="text">
</div>`; </div>`;
@ -322,7 +322,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<textarea ngControl="text"></textarea> <textarea ngControl="text"></textarea>
</div>`; </div>`;
@ -346,7 +346,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="checkbox" ngControl="checkbox"> <input type="checkbox" ngControl="checkbox">
</div>`; </div>`;
@ -372,7 +372,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="number" ngControl="num"> <input type="number" ngControl="num">
</div>`; </div>`;
@ -396,7 +396,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="number" ngControl="num" required> <input type="number" ngControl="num" required>
</div>`; </div>`;
@ -427,7 +427,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'num': new FormControl(10)}); var form = new FormGroup({'num': new FormControl(10)});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="number" ngControl="num" [(ngModel)]="data"> <input type="number" ngControl="num" [(ngModel)]="data">
</div>`; </div>`;
@ -447,7 +447,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<form [ngFormModel]="form"> const t = `<form [formGroup]="form">
<input type="radio" ngControl="foodChicken" name="food"> <input type="radio" ngControl="foodChicken" name="food">
<input type="radio" ngControl="foodFish" name="food"> <input type="radio" ngControl="foodFish" name="food">
</form>`; </form>`;
@ -477,7 +477,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<select> const t = `<select>
<option value="SF"></option> <option value="SF"></option>
<option value="NYC"></option> <option value="NYC"></option>
</select>`; </select>`;
@ -498,7 +498,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<select> const t = `<select>
<option *ngFor="let city of list" [value]="city['id']"> <option *ngFor="let city of list" [value]="city['id']">
{{ city['name'] }} {{ city['name'] }}
</option> </option>
@ -523,7 +523,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<select ngControl="city"> <select ngControl="city">
<option value="SF"></option> <option value="SF"></option>
<option value="NYC"></option> <option value="NYC"></option>
@ -555,7 +555,7 @@ export function main() {
it('with a dynamic list of options', it('with a dynamic list of options',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<select ngControl="city"> <select ngControl="city">
<option *ngFor="let c of data" [value]="c"></option> <option *ngFor="let c of data" [value]="c"></option>
</select> </select>
@ -582,7 +582,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select> </select>
@ -615,7 +615,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select> </select>
@ -644,7 +644,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select> </select>
@ -676,7 +676,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select> </select>
@ -703,7 +703,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option> <option *ngFor="let c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option>
</select> </select>
@ -734,7 +734,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select> </select>
@ -764,7 +764,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div> const t = `<div>
<select [(ngModel)]="selectedCity"> <select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option> <option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select> </select>
@ -794,7 +794,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="name" wrapped-value> <input type="text" ngControl="name" wrapped-value>
</div>`; </div>`;
@ -813,32 +813,31 @@ export function main() {
}); });
})); }));
// TODO(kara): Revisit when re-writing to ngModelOptions it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
xit('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property', inject(
inject( [TestComponentBuilder, AsyncTestCompleter],
[TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { const t = `<div [formGroup]="form">
var t = `<div [ngFormModel]="form">
<my-input ngControl="name"></my-input> <my-input ngControl="name"></my-input>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => { tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = fixture.debugElement.componentInstance.form =
new FormGroup({'name': new FormControl('aa')}); new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges(); fixture.detectChanges();
var input = fixture.debugElement.query(By.css('my-input')); var input = fixture.debugElement.query(By.css('my-input'));
expect(input.componentInstance.value).toEqual('!aa!'); expect(input.componentInstance.value).toEqual('!aa!');
input.componentInstance.value = '!bb!'; input.componentInstance.value = '!bb!';
ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => { ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => {
expect(fixture.debugElement.componentInstance.form.value).toEqual({ expect(fixture.debugElement.componentInstance.form.value).toEqual({
'name': 'bb' 'name': 'bb'
}); });
async.done(); async.done();
}); });
input.componentInstance.dispatchChangeEvent(); input.componentInstance.dispatchChangeEvent();
}); });
})); }));
}); });
@ -853,7 +852,7 @@ export function main() {
'max': new FormControl('') 'max': new FormControl('')
}); });
var t = `<div [ngFormModel]="form" login-is-empty-validator> const t = `<div [formGroup]="form" login-is-empty-validator>
<input type="text" ngControl="login" required> <input type="text" ngControl="login" required>
<input type="text" ngControl="min" minlength="3"> <input type="text" ngControl="min" minlength="3">
<input type="text" ngControl="max" maxlength="3"> <input type="text" ngControl="max" maxlength="3">
@ -897,7 +896,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new FormGroup({'login': new FormControl('')}); var form = new FormGroup({'login': new FormControl('')});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login" uniq-login-validator="expected"> <input type="text" ngControl="login" uniq-login-validator="expected">
</div>`; </div>`;
@ -928,7 +927,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'login': new FormControl('aa', Validators.required)}); var form = new FormGroup({'login': new FormControl('aa', Validators.required)});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -953,7 +952,7 @@ export function main() {
new FormControl('', Validators.required, uniqLoginAsyncValidator('expected')); new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
var form = new FormGroup({'login': control}); var form = new FormGroup({'login': control});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div>`; </div>`;
@ -991,7 +990,7 @@ export function main() {
var form = var form =
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})}); new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<div ngControlGroup="nested"> <div ngControlGroup="nested">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div> </div>
@ -1014,7 +1013,7 @@ export function main() {
var form = var form =
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})}); new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form"> const t = `<div [formGroup]="form">
<div ngControlGroup="nested"> <div ngControlGroup="nested">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div> </div>
@ -1038,8 +1037,8 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new FormGroup({'name': new FormControl('')}); var form = new FormGroup({'name': new FormControl('')});
var t = const t =
`<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`; `<div [formGroup]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick(); tick();
@ -1083,7 +1082,7 @@ export function main() {
describe('template-driven forms', () => { describe('template-driven forms', () => {
it('should add new controls and control groups', it('should add new controls and control groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form> const t = `<form>
<div ngControlGroup="user"> <div ngControlGroup="user">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div> </div>
@ -1105,7 +1104,7 @@ export function main() {
it('should emit ngSubmit event on submit', it('should emit ngSubmit event on submit',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div><form (ngSubmit)="name='updated'"></form></div>`; const t = `<div><form (ngSubmit)="name='updated'"></form></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick(); tick();
@ -1122,7 +1121,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<form ngNoForm> const t = `<form ngNoForm>
</form>`; </form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => { tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -1136,7 +1135,7 @@ export function main() {
it('should remove controls', it('should remove controls',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form> const t = `<form>
<div *ngIf="name == 'show'"> <div *ngIf="name == 'show'">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div> </div>
@ -1161,7 +1160,7 @@ export function main() {
it('should remove control groups', it('should remove control groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form> const t = `<form>
<div *ngIf="name=='show'" ngControlGroup="user"> <div *ngIf="name=='show'" ngControlGroup="user">
<input type="text" ngControl="login"> <input type="text" ngControl="login">
</div> </div>
@ -1186,7 +1185,7 @@ export function main() {
it('should support ngModel for complex forms', it('should support ngModel for complex forms',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form> const t = `<form>
<input type="text" ngControl="name" [(ngModel)]="name"> <input type="text" ngControl="name" [(ngModel)]="name">
</form>`; </form>`;
@ -1209,7 +1208,7 @@ export function main() {
it('should support ngModel for single fields', it('should support ngModel for single fields',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div><input type="text" [(ngModel)]="name"></div>`; const t = `<div><input type="text" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick(); tick();
@ -1374,7 +1373,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'name': new FormControl('', Validators.required)}); var form = new FormGroup({'name': new FormControl('', Validators.required)});
var t = `<form [ngFormModel]="form"><input type="text" ngControl="name"></form>`; const t = `<form [formGroup]="form"><input type="text" ngControl="name"></form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => { tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form = form; fixture.debugElement.componentInstance.form = form;
@ -1405,7 +1404,7 @@ export function main() {
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => { (tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div><input [(ngModel)]="name" required></div>`; const t = `<div><input [(ngModel)]="name" required></div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => { tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.name = ''; fixture.debugElement.componentInstance.name = '';
@ -1458,7 +1457,7 @@ export function main() {
it('should update the view when the model is set back to what used to be in the view', it('should update the view when the model is set back to what used to be in the view',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<input type="text" [(ngModel)]="name">`; const t = `<input type="text" [(ngModel)]="name">`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick(); tick();
fixture.debugElement.componentInstance.name = ''; fixture.debugElement.componentInstance.name = '';
@ -1491,7 +1490,7 @@ export function main() {
// {{x.valid}} used to crash because valid() tried to read a property // {{x.valid}} used to crash because valid() tried to read a property
// from form.control before it was set. This test verifies this bug is // from form.control before it was set. This test verifies this bug is
// fixed. // fixed.
var t = `<form><div ngControlGroup="x" #x="ngForm"> const t = `<form><div ngControlGroup="x" #x="ngForm">
<input type="text" ngControl="test"></div>{{x.valid}}</form>`; <input type="text" ngControl="test"></div>{{x.valid}}</form>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8); let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick(); tick();
@ -1523,7 +1522,7 @@ class WrappedValue implements ControlValueAccessor {
@Component({selector: 'my-input', template: ''}) @Component({selector: 'my-input', template: ''})
class MyInput implements ControlValueAccessor { class MyInput implements ControlValueAccessor {
@Output('input') onInput: EventEmitter<any> = new EventEmitter(); @Output('input') onInput = new EventEmitter();
value: string; value: string;
constructor(cd: NgControl) { cd.valueAccessor = this; } constructor(cd: NgControl) { cd.valueAccessor = this; }
@ -1584,7 +1583,7 @@ class UniqLoginValidator implements Validator {
template: '', template: '',
directives: [ directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator, FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
FormControlDirective FormControlDirective, FormGroupDirective
], ],
providers: [FORM_PROVIDERS] providers: [FORM_PROVIDERS]
}) })