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 {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 {CheckboxControlValueAccessor} from './forms/directives/checkbox_value_accessor';
export {ControlContainer} from './forms/directives/control_container';
export {ControlValueAccessor, NG_VALUE_ACCESSOR} from './forms/directives/control_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 {NgControl} from './forms/directives/ng_control';
export {NgControlGroup} from './forms/directives/ng_control_group';
export {NgControlName} from './forms/directives/ng_control_name';
export {NgControlStatus} from './forms/directives/ng_control_status';
export {NgForm} from './forms/directives/ng_form';
export {NgFormModel} from './forms/directives/ng_form_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 {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator, Validator} from './forms/directives/validators';
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 {DefaultValueAccessor} from './directives/default_value_accessor';
import {FormControlDirective} from './directives/form_control_directive';
import {NgControlGroup} from './directives/ng_control_group';
import {NgControlName} from './directives/ng_control_name';
import {NgControlStatus} from './directives/ng_control_status';
import {NgForm} from './directives/ng_form';
import {NgFormModel} from './directives/ng_form_model';
import {NgModel} from './directives/ng_model';
import {NumberValueAccessor} from './directives/number_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 {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
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 {ControlValueAccessor} from './directives/control_value_accessor';
export {DefaultValueAccessor} from './directives/default_value_accessor';
export {FormControlDirective} from './directives/form_control_directive';
export {NgControl} from './directives/ng_control';
export {NgControlGroup} from './directives/ng_control_group';
export {NgControlName} from './directives/ng_control_name';
export {NgControlStatus} from './directives/ng_control_status';
export {NgForm} from './directives/ng_form';
export {NgFormModel} from './directives/ng_form_model';
export {NgModel} from './directives/ng_model';
export {NumberValueAccessor} from './directives/number_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 {NgSelectMultipleOption, SelectMultipleControlValueAccessor} from './directives/select_multiple_control_value_accessor';
export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValidator} from './directives/validators';
@ -54,7 +54,7 @@ export {MaxLengthValidator, MinLengthValidator, PatternValidator, RequiredValida
export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
NgControlName, NgControlGroup,
NgModel, NgFormModel, NgForm,
NgModel, NgForm,
NgSelectOption, NgSelectMultipleOption, DefaultValueAccessor, NumberValueAccessor,
CheckboxControlValueAccessor, SelectControlValueAccessor, SelectMultipleControlValueAccessor,
@ -62,3 +62,6 @@ export const FORM_DIRECTIVES: Type[] = /*@ts2dart_const*/[
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.
*
@ -23,7 +23,7 @@ export interface Form {
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;

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.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* ### Example ([live demo](http://plnkr.co/edit/7EJ11uGeaggViYM6T5nq?p=preview))
* This directive can only be used as a child of {@link NgForm} or {@link FormGroupDirective}.
*
* ```typescript
* @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
*

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

@ -77,7 +77,7 @@ export const formDirectiveProvider: any =
* @experimental
*/
@Directive({
selector: 'form:not([ngNoForm]):not([ngFormModel]),ngForm,[ngForm]',
selector: 'form:not([ngNoForm]):not([formGroup]),ngForm,[ngForm]',
providers: [formDirectiveProvider],
host: {
'(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 {EventEmitter, ObservableWrapper} from '../../facade/async';
import {StringMapWrapper} from '../../facade/collection';
import {FormControl} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
import {EventEmitter, ObservableWrapper} from '../../../facade/async';
import {StringMapWrapper} from '../../../facade/collection';
import {FormControl} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../../validators';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from './control_value_accessor';
import {NgControl} from './ng_control';
import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from './shared';
import {AsyncValidatorFn, ValidatorFn} from './validators';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '../control_value_accessor';
import {NgControl} from '../ng_control';
import {composeAsyncValidators, composeValidators, isPropertyUpdated, selectValueAccessor, setUpControl} from '../shared';
import {AsyncValidatorFn, ValidatorFn} from '../validators';
export const formControlBinding: any =
/*@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 {ListWrapper, StringMapWrapper} from '../../facade/collection';
import {BaseException} from '../../facade/exceptions';
import {isBlank} from '../../facade/lang';
import {FormControl, FormGroup} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../validators';
import {EventEmitter, ObservableWrapper} from '../../../facade/async';
import {ListWrapper, StringMapWrapper} from '../../../facade/collection';
import {BaseException} from '../../../facade/exceptions';
import {isBlank} from '../../../facade/lang';
import {FormControl, FormGroup} from '../../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS, Validators} from '../../validators';
import {ControlContainer} from './control_container';
import {Form} from './form_interface';
import {NgControl} from './ng_control';
import {NgControlGroup} from './ng_control_group';
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from './shared';
import {ControlContainer} from '../control_container';
import {Form} from '../form_interface';
import {NgControl} from '../ng_control';
import {NgControlGroup} from '../ng_control_group';
import {composeAsyncValidators, composeValidators, setUpControl, setUpFormGroup} from '../shared';
export const formDirectiveProvider: any =
/*@ts2dart_const*/ /* @ts2dart_Provider */ {
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))
*
@ -32,8 +32,8 @@ export const formDirectiveProvider: any =
* selector: 'my-app',
* template: `
* <div>
* <h2>NgFormModel Example</h2>
* <form [ngFormModel]="loginForm">
* <h2>Binding an existing form group</h2>
* <form [formGroup]="loginForm">
* <p>Login: <input type="text" ngControl="login"></p>
* <p>Password: <input type="password" ngControl="password"></p>
* </form>
@ -66,7 +66,7 @@ export const formDirectiveProvider: any =
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
* template: `
* <form [ngFormModel]='loginForm'>
* <form [formGroup]='loginForm'>
* Login <input type='text' ngControl='login' [(ngModel)]='credentials.login'>
* Password <input type='password' ngControl='password'
* [(ngModel)]='credentials.password'>
@ -94,20 +94,18 @@ export const formDirectiveProvider: any =
* @experimental
*/
@Directive({
selector: '[ngFormModel]',
selector: '[formGroup]',
providers: [formDirectiveProvider],
inputs: ['form: ngFormModel'],
host: {'(submit)': 'onSubmit()'},
outputs: ['ngSubmit'],
exportAs: 'ngForm'
})
export class NgFormModel extends ControlContainer implements Form,
export class FormGroupDirective extends ControlContainer implements Form,
OnChanges {
private _submitted: boolean = false;
form: FormGroup = null;
directives: NgControl[] = [];
ngSubmit = new EventEmitter();
@Input('formGroup') form: FormGroup = null;
@Output() ngSubmit = new EventEmitter();
constructor(
@Optional() @Self() @Inject(NG_VALIDATORS) private _validators: any[],
@ -181,8 +179,9 @@ export class NgFormModel extends ControlContainer implements Form,
private _checkFormPresent() {
if (isBlank(this.form)) {
throw new BaseException(
`ngFormModel expects a form. Please pass one in. Example: <form [ngFormModel]="myCoolForm">`);
throw new BaseException(`formGroup expects a FormGroup instance. Please pass one in.
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.
*
* ### Example ([live demo](http://plnkr.co/edit/ENgZo8EuIECZNensZCVr?p=preview))
*
* ```typescript
* @Component({
* selector: 'my-app',
* viewProviders: [FORM_BINDINGS]
* template: `
* <form [ngFormModel]="loginForm">
* <form [formGroup]="loginForm">
* <p>Login <input ngControl="login"></p>
* <div ngControlGroup="passwordRetry">
* <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
*
* 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
* bound to a DOM element instead. This `FormControl` can be configured with a custom
* With {@link FormControlDirective} or {@link FormGroupDirective} an existing {@link FormControl}
* can be bound to a DOM element instead. This `FormControl` can be configured with a custom
* validation function.
*
* @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 {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';
@ -105,13 +105,13 @@ export function main() {
});
});
describe('NgFormModel', () => {
describe('formGroup', () => {
var form: any /** TODO #9100 */;
var formModel: FormGroup;
var loginControlDir: any /** TODO #9100 */;
beforeEach(() => {
form = new NgFormModel([], []);
form = new FormGroupDirective([], []);
formModel = new FormGroup({
'login': new FormControl(),
'passwords': new FormGroup(
@ -242,7 +242,7 @@ export function main() {
it('should set up a sync validator', () => {
var formValidator = (c: any /** TODO #9100 */) => ({'custom': true});
var f = new NgFormModel([formValidator], []);
var f = new FormGroupDirective([formValidator], []);
f.form = formModel;
f.ngOnChanges({'form': new SimpleChange(null, null)});
@ -250,7 +250,7 @@ export function main() {
});
it('should set up an async validator', fakeAsync(() => {
var f = new NgFormModel([], [asyncValidator('expected')]);
var f = new FormGroupDirective([], [asyncValidator('expected')]);
f.form = formModel;
f.ngOnChanges({'form': new SimpleChange(null, null)});
@ -345,7 +345,7 @@ export function main() {
beforeEach(() => {
formModel = new FormGroup({'login': new FormControl(null)});
var parent = new NgFormModel([], []);
var parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'group': formModel});
controlGroupDir = new NgControlGroup(parent, [], []);
controlGroupDir.name = 'group';
@ -447,7 +447,7 @@ export function main() {
beforeEach(() => {
formModel = new FormControl('name');
var parent = new NgFormModel([], []);
var parent = new FormGroupDirective([], []);
parent.form = new FormGroup({'name': formModel});
controlNameDir = new NgControlName(parent, [], [], [defaultAccessor]);
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 {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 {ComponentFixture} from '@angular/compiler/testing';
import {Component, Directive, EventEmitter, Output} from '@angular/core';
@ -22,7 +22,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</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(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
expect(() => fixture.detectChanges())
.toThrowError(new RegExp(`ngFormModel expects a form. Please pass one in.`));
.toThrowError(new RegExp(`formGroup expects a FormGroup instance`));
async.done();
});
}));
@ -58,7 +58,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -81,7 +81,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var form = new FormGroup({'login': new FormControl('oldValue')});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -102,8 +102,8 @@ export function main() {
it('should emit ngSubmit event on submit',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div>
<form [ngFormModel]="form" (ngSubmit)="name='updated'"></form>
const t = `<div>
<form [formGroup]="form" (ngSubmit)="name='updated'"></form>
<span>{{name}}</span>
</div>`;
@ -124,7 +124,7 @@ export function main() {
it('should mark NgForm as submitted on submit event',
inject([TestComponentBuilder], fakeAsync((tcb: TestComponentBuilder) => {
var t = `<div>
const t = `<div>
<form #f="ngForm" (ngSubmit)="data=f.submitted"></form>
<span>{{data}}</span>
</div>`;
@ -147,10 +147,10 @@ export function main() {
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) => {
var t = `<div>
<form #f="ngForm" [ngFormModel]="form" (ngSubmit)="data=f.submitted"></form>
const t = `<div>
<form #f="ngForm" [formGroup]="form" (ngSubmit)="data=f.submitted"></form>
<span>{{data}}</span>
</div>`;
@ -200,7 +200,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -226,7 +226,7 @@ export function main() {
var login = new FormControl('oldValue');
var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -251,7 +251,7 @@ export function main() {
var login = new FormControl('oldValue');
var form = new FormGroup({'login': login});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -275,7 +275,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="text">
</div>`;
@ -299,7 +299,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input ngControl="text">
</div>`;
@ -322,7 +322,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<textarea ngControl="text"></textarea>
</div>`;
@ -346,7 +346,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="checkbox" ngControl="checkbox">
</div>`;
@ -372,7 +372,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="number" ngControl="num">
</div>`;
@ -396,7 +396,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="number" ngControl="num" required>
</div>`;
@ -427,7 +427,7 @@ export function main() {
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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">
</div>`;
@ -447,7 +447,7 @@ export function main() {
inject(
[TestComponentBuilder, 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="foodFish" name="food">
</form>`;
@ -477,7 +477,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<select>
const t = `<select>
<option value="SF"></option>
<option value="NYC"></option>
</select>`;
@ -498,7 +498,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<select>
const t = `<select>
<option *ngFor="let city of list" [value]="city['id']">
{{ city['name'] }}
</option>
@ -523,7 +523,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<select ngControl="city">
<option value="SF"></option>
<option value="NYC"></option>
@ -555,7 +555,7 @@ export function main() {
it('with a dynamic list of options',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<select ngControl="city">
<option *ngFor="let c of data" [value]="c"></option>
</select>
@ -582,7 +582,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
@ -615,7 +615,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
@ -644,7 +644,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
@ -676,7 +676,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select>
@ -703,7 +703,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list; trackBy:customTrackBy" [ngValue]="c">{{c}}</option>
</select>
@ -734,7 +734,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c}}</option>
</select>
@ -764,7 +764,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div>
const t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
@ -794,7 +794,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="name" wrapped-value>
</div>`;
@ -813,32 +813,31 @@ export function main() {
});
}));
// TODO(kara): Revisit when re-writing to ngModelOptions
xit('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<div [ngFormModel]="form">
it('should support custom value accessors on non builtin input elements that fire a change event without a \'target\' property',
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
const t = `<div [formGroup]="form">
<my-input ngControl="name"></my-input>
</div>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('my-input'));
expect(input.componentInstance.value).toEqual('!aa!');
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
fixture.debugElement.componentInstance.form =
new FormGroup({'name': new FormControl('aa')});
fixture.detectChanges();
var input = fixture.debugElement.query(By.css('my-input'));
expect(input.componentInstance.value).toEqual('!aa!');
input.componentInstance.value = '!bb!';
ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => {
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'name': 'bb'
});
async.done();
});
input.componentInstance.dispatchChangeEvent();
});
}));
input.componentInstance.value = '!bb!';
ObservableWrapper.subscribe(input.componentInstance.onInput, (value) => {
expect(fixture.debugElement.componentInstance.form.value).toEqual({
'name': 'bb'
});
async.done();
});
input.componentInstance.dispatchChangeEvent();
});
}));
});
@ -853,7 +852,7 @@ export function main() {
'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="min" minlength="3">
<input type="text" ngControl="max" maxlength="3">
@ -897,7 +896,7 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
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">
</div>`;
@ -928,7 +927,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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">
</div>`;
@ -953,7 +952,7 @@ export function main() {
new FormControl('', Validators.required, uniqLoginAsyncValidator('expected'));
var form = new FormGroup({'login': control});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<input type="text" ngControl="login">
</div>`;
@ -991,7 +990,7 @@ export function main() {
var form =
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<div ngControlGroup="nested">
<input type="text" ngControl="login">
</div>
@ -1014,7 +1013,7 @@ export function main() {
var form =
new FormGroup({'nested': new FormGroup({'login': new FormControl('value')})});
var t = `<div [ngFormModel]="form">
const t = `<div [formGroup]="form">
<div ngControlGroup="nested">
<input type="text" ngControl="login">
</div>
@ -1038,8 +1037,8 @@ export function main() {
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var form = new FormGroup({'name': new FormControl('')});
var t =
`<div [ngFormModel]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
const t =
`<div [formGroup]="form"><input type="text" ngControl="name" [(ngModel)]="name"></div>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
@ -1083,7 +1082,7 @@ export function main() {
describe('template-driven forms', () => {
it('should add new controls and control groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form>
const t = `<form>
<div ngControlGroup="user">
<input type="text" ngControl="login">
</div>
@ -1105,7 +1104,7 @@ export function main() {
it('should emit ngSubmit event on submit',
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);
tick();
@ -1122,7 +1121,7 @@ export function main() {
inject(
[TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
var t = `<form ngNoForm>
const t = `<form ngNoForm>
</form>`;
tcb.overrideTemplate(MyComp8, t).createAsync(MyComp8).then((fixture) => {
@ -1136,7 +1135,7 @@ export function main() {
it('should remove controls',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form>
const t = `<form>
<div *ngIf="name == 'show'">
<input type="text" ngControl="login">
</div>
@ -1161,7 +1160,7 @@ export function main() {
it('should remove control groups',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form>
const t = `<form>
<div *ngIf="name=='show'" ngControlGroup="user">
<input type="text" ngControl="login">
</div>
@ -1186,7 +1185,7 @@ export function main() {
it('should support ngModel for complex forms',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
var t = `<form>
const t = `<form>
<input type="text" ngControl="name" [(ngModel)]="name">
</form>`;
@ -1209,7 +1208,7 @@ export function main() {
it('should support ngModel for single fields',
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);
tick();
@ -1374,7 +1373,7 @@ export function main() {
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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) => {
fixture.debugElement.componentInstance.form = form;
@ -1405,7 +1404,7 @@ export function main() {
inject(
[TestComponentBuilder, 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) => {
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',
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);
tick();
fixture.debugElement.componentInstance.name = '';
@ -1491,7 +1490,7 @@ export function main() {
// {{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
// 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>`;
let fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
tick();
@ -1523,7 +1522,7 @@ class WrappedValue implements ControlValueAccessor {
@Component({selector: 'my-input', template: ''})
class MyInput implements ControlValueAccessor {
@Output('input') onInput: EventEmitter<any> = new EventEmitter();
@Output('input') onInput = new EventEmitter();
value: string;
constructor(cd: NgControl) { cd.valueAccessor = this; }
@ -1584,7 +1583,7 @@ class UniqLoginValidator implements Validator {
template: '',
directives: [
FORM_DIRECTIVES, WrappedValue, MyInput, NgIf, NgFor, LoginIsEmptyValidator, UniqLoginValidator,
FormControlDirective
FormControlDirective, FormGroupDirective
],
providers: [FORM_PROVIDERS]
})