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

fix(forms): ngModel should emit valueChanges and statusChanges asynchronously

This commit is contained in:
Kara Erickson 2016-06-23 18:07:56 -07:00
parent fbd2dd9ca2
commit 97a2119596
2 changed files with 139 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
modules/@angular/forms/src/directives/ng_model.ts
View File

@ -8,7 +8,7 @@
import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core'; import {Directive, Host, Inject, Input, OnChanges, OnDestroy, Optional, Output, Self, SimpleChanges, forwardRef} from '@angular/core';
import {EventEmitter, ObservableWrapper} from '../facade/async'; import {EventEmitter, ObservableWrapper, PromiseWrapper} from '../facade/async';
import {BaseException} from '../facade/exceptions'; import {BaseException} from '../facade/exceptions';
import {FormControl} from '../model'; import {FormControl} from '../model';
import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators'; import {NG_ASYNC_VALIDATORS, NG_VALIDATORS} from '../validators';
@ -79,7 +79,7 @@ export class NgModel extends NgControl implements OnChanges,
if (!this._registered) this._setUpControl(); if (!this._registered) this._setUpControl();
if (isPropertyUpdated(changes, this.viewModel)) { if (isPropertyUpdated(changes, this.viewModel)) {
this._control.updateValue(this.model); this._updateValue(this.model);
this.viewModel = this.model; this.viewModel = this.model;
} }
} }
@ -120,7 +120,7 @@ export class NgModel extends NgControl implements OnChanges,
this._control.updateValueAndValidity({emitEvent: false}); this._control.updateValueAndValidity({emitEvent: false});
} }
private _checkName() { private _checkName(): void {
if (this.options && this.options.name) this.name = this.options.name; if (this.options && this.options.name) this.name = this.options.name;
if (!this._isStandalone() && !this.name) { if (!this._isStandalone() && !this.name) {
@ -133,4 +133,8 @@ export class NgModel extends NgControl implements OnChanges,
`); `);
} }
} }
private _updateValue(value: any): void {
PromiseWrapper.scheduleMicrotask(() => { this.control.updateValue(value); });
}
} }

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

@ -660,72 +660,67 @@ export function main() {
}))); })));
it('with option values that are objects', it('with option values that are objects',
inject( fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
[TestComponentBuilder, AsyncTestCompleter], const t = `<div>
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t) tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr) .overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8) .createAsync(MyComp8)
.then((fixture) => { .then((fixture) => {
var testComp = fixture.debugElement.componentInstance; var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}]; testComp.list = [{'name': 'SF'}, {'name': 'NYC'}, {'name': 'Buffalo'}];
testComp.selectedCity = testComp.list[1]; testComp.selectedCity = testComp.list[1];
fixture.detectChanges(); fixture.detectChanges();
var select = fixture.debugElement.query(By.css('select')); var select = fixture.debugElement.query(By.css('select'));
var nycOption = fixture.debugElement.queryAll(By.css('option'))[1]; var nycOption = fixture.debugElement.queryAll(By.css('option'))[1];
expect(select.nativeElement.value).toEqual('1: Object'); tick();
expect(nycOption.nativeElement.selected).toBe(true); expect(select.nativeElement.value).toEqual('1: Object');
expect(nycOption.nativeElement.selected).toBe(true);
select.nativeElement.value = '2: Object'; select.nativeElement.value = '2: Object';
dispatchEvent(select.nativeElement, 'change'); dispatchEvent(select.nativeElement, 'change');
fixture.detectChanges(); fixture.detectChanges();
TimerWrapper.setTimeout(() => { tick();
expect(testComp.selectedCity['name']).toEqual('Buffalo'); expect(testComp.selectedCity['name']).toEqual('Buffalo');
async.done(); });
}, 0); })));
});
}));
it('when new options are added (selection through the model)', it('when new options are added (selection through the model)',
inject( fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
[TestComponentBuilder, AsyncTestCompleter], const t = `<div>
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t) tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr) .overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8) .createAsync(MyComp8)
.then((fixture) => { .then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance; var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}]; testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
testComp.selectedCity = testComp.list[1]; testComp.selectedCity = testComp.list[1];
fixture.detectChanges(); fixture.detectChanges();
testComp.list.push({'name': 'Buffalo'}); testComp.list.push({'name': 'Buffalo'});
testComp.selectedCity = testComp.list[2]; testComp.selectedCity = testComp.list[2];
fixture.detectChanges(); fixture.detectChanges();
tick();
var select = fixture.debugElement.query(By.css('select')); var select = fixture.debugElement.query(By.css('select'));
var buffalo = fixture.debugElement.queryAll(By.css('option'))[2]; var buffalo = fixture.debugElement.queryAll(By.css('option'))[2];
expect(select.nativeElement.value).toEqual('2: Object'); expect(select.nativeElement.value).toEqual('2: Object');
expect(buffalo.nativeElement.selected).toBe(true); expect(buffalo.nativeElement.selected).toBe(true);
async.done(); });
}); })));
}));
it('when new options are added (selection through the UI)', it('when new options are added (selection through the UI)',
inject( inject(
@ -763,101 +758,96 @@ export function main() {
it('when options are removed', it('when options are removed',
inject( fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
[TestComponentBuilder, AsyncTestCompleter], const t = `<div>
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t) tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr) .overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8) .createAsync(MyComp8)
.then((fixture) => { .then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance; var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}]; testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
testComp.selectedCity = testComp.list[1]; testComp.selectedCity = testComp.list[1];
fixture.detectChanges(); fixture.detectChanges();
tick();
var select = fixture.debugElement.query(By.css('select')); var select = fixture.debugElement.query(By.css('select'));
expect(select.nativeElement.value).toEqual('1: Object'); expect(select.nativeElement.value).toEqual('1: Object');
testComp.list.pop(); testComp.list.pop();
fixture.detectChanges(); fixture.detectChanges();
tick();
expect(select.nativeElement.value).not.toEqual('1: Object'); expect(select.nativeElement.value).not.toEqual('1: Object');
async.done(); });
}); })));
}));
it('when option values change identity while tracking by index', it('when option values change identity while tracking by index',
inject( fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
[TestComponentBuilder, AsyncTestCompleter], const t = `<div>
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t) tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr) .overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8) .createAsync(MyComp8)
.then((fixture) => { .then((fixture) => {
var testComp = fixture.debugElement.componentInstance; var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'SF'}, {'name': 'NYC'}]; testComp.list = [{'name': 'SF'}, {'name': 'NYC'}];
testComp.selectedCity = testComp.list[0]; testComp.selectedCity = testComp.list[0];
fixture.detectChanges(); fixture.detectChanges();
testComp.list[1] = 'Buffalo'; testComp.list[1] = 'Buffalo';
testComp.selectedCity = testComp.list[1]; testComp.selectedCity = testComp.list[1];
fixture.detectChanges(); fixture.detectChanges();
tick();
var select = fixture.debugElement.query(By.css('select')); var select = fixture.debugElement.query(By.css('select'));
var buffalo = fixture.debugElement.queryAll(By.css('option'))[1]; var buffalo = fixture.debugElement.queryAll(By.css('option'))[1];
expect(select.nativeElement.value).toEqual('1: Buffalo'); expect(select.nativeElement.value).toEqual('1: Buffalo');
expect(buffalo.nativeElement.selected).toBe(true); expect(buffalo.nativeElement.selected).toBe(true);
async.done(); });
}); })));
}));
it('with duplicate option values', it('with duplicate option values',
inject( fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
[TestComponentBuilder, AsyncTestCompleter], const t = `<div>
(tcb: TestComponentBuilder, async: AsyncTestCompleter) => {
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.name}}</option>
</select> </select>
</div>`; </div>`;
tcb.overrideTemplate(MyComp8, t) tcb.overrideTemplate(MyComp8, t)
.overrideProviders(MyComp8, providerArr) .overrideProviders(MyComp8, providerArr)
.createAsync(MyComp8) .createAsync(MyComp8)
.then((fixture) => { .then((fixture) => {
var testComp = fixture.debugElement.componentInstance; var testComp = fixture.debugElement.componentInstance;
testComp.list = [{'name': 'NYC'}, {'name': 'SF'}, {'name': 'SF'}]; testComp.list = [{'name': 'NYC'}, {'name': 'SF'}, {'name': 'SF'}];
testComp.selectedCity = testComp.list[0]; testComp.selectedCity = testComp.list[0];
fixture.detectChanges(); fixture.detectChanges();
testComp.selectedCity = testComp.list[1]; testComp.selectedCity = testComp.list[1];
fixture.detectChanges(); fixture.detectChanges();
tick();
var select = fixture.debugElement.query(By.css('select')); var select = fixture.debugElement.query(By.css('select'));
var firstSF = fixture.debugElement.queryAll(By.css('option'))[1]; var firstSF = fixture.debugElement.queryAll(By.css('option'))[1];
expect(select.nativeElement.value).toEqual('1: Object'); expect(select.nativeElement.value).toEqual('1: Object');
expect(firstSF.nativeElement.selected).toBe(true); expect(firstSF.nativeElement.selected).toBe(true);
async.done(); });
}); })));
}));
it('when option values have same content, but different identities', it('when option values have same content, but different identities',
inject( inject(
@ -1239,6 +1229,35 @@ export function main() {
expect(fixture.debugElement.componentInstance.name).toEqual('updated'); expect(fixture.debugElement.componentInstance.name).toEqual('updated');
}))); })));
it('should emit valueChanges and statusChanges on init',
fakeAsync(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
const t = `<form>
<input type="text" name="first" [ngModel]="name" minlength="3">
</form>`;
const fixture = tcb.overrideTemplate(MyComp8, t).createFakeAsync(MyComp8);
const form = fixture.debugElement.children[0].injector.get(NgForm);
fixture.debugElement.componentInstance.name = 'aa';
fixture.detectChanges();
expect(form.valid).toEqual(true);
expect(form.value).toEqual({});
let formValidity: string;
let formValue: Object;
ObservableWrapper.subscribe(
form.form.statusChanges, (status: string) => { formValidity = status; });
ObservableWrapper.subscribe(
form.form.valueChanges, (value: string) => { formValue = value; });
tick();
expect(formValidity).toEqual('INVALID');
expect(formValue).toEqual({first: 'aa'});
})));
it('should not create a template-driven form when ngNoForm is used', it('should not create a template-driven form when ngNoForm is used',
inject( inject(
[TestComponentBuilder, AsyncTestCompleter], [TestComponentBuilder, AsyncTestCompleter],
@ -1341,6 +1360,8 @@ export function main() {
fixture.detectChanges(); fixture.detectChanges();
var input = fixture.debugElement.query(By.css('input')).nativeElement; var input = fixture.debugElement.query(By.css('input')).nativeElement;
tick();
expect(input.value).toEqual('oldValue'); expect(input.value).toEqual('oldValue');
input.value = 'updatedValue'; input.value = 'updatedValue';