fix(forms): update accessor value when native select value changes

Closes #8710
This commit is contained in:
Kara Erickson 2016-05-23 18:43:32 -07:00
parent 1ac38bd69a
commit 7a2ce7ff21
2 changed files with 38 additions and 2 deletions

View File

@ -68,7 +68,10 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
}
registerOnChange(fn: (value: any) => any): void {
this.onChange = (valueString: string) => { fn(this._getOptionValue(valueString)); };
this.onChange = (valueString: string) => {
this.value = valueString;
fn(this._getOptionValue(valueString));
};
}
registerOnTouched(fn: () => any): void { this.onTouched = fn; }

View File

@ -585,7 +585,7 @@ export function main() {
});
}));
it("when new options are added",
it("when new options are added (selection through the model)",
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
var t = `<div>
@ -615,6 +615,39 @@ export function main() {
});
}));
it("when new options are added (selection through the UI)",
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {
var t = `<div>
<select [(ngModel)]="selectedCity">
<option *ngFor="let c of list" [ngValue]="c">{{c['name']}}</option>
</select>
</div>`;
tcb.overrideTemplate(MyComp8, t)
.createAsync(MyComp8)
.then((fixture) => {
var testComp: MyComp8 = fixture.debugElement.componentInstance;
testComp.list = [{"name": "SF"}, {"name": "NYC"}];
testComp.selectedCity = testComp.list[0];
fixture.detectChanges();
var select = fixture.debugElement.query(By.css("select"));
var ny = fixture.debugElement.queryAll(By.css("option"))[1];
select.nativeElement.value = "1: Object";
dispatchEvent(select.nativeElement, "change");
testComp.list.push({"name": "Buffalo"});
fixture.detectChanges();
expect(select.nativeElement.value).toEqual("1: Object");
expect(ny.nativeElement.selected).toBe(true);
async.done();
});
}));
it("when options are removed",
inject([TestComponentBuilder, AsyncTestCompleter],
(tcb: TestComponentBuilder, async) => {