X Tutup
Skip to content

Commit 8db97b0

Browse files
vsavkinvsavkin
committed
fix(forms): support both value and ng-value
1 parent 9be04f8 commit 8db97b0

File tree

3 files changed

+35
-20
lines changed

3 files changed

+35
-20
lines changed

‎modules/angular2/src/common/forms/directives/select_control_value_accessor.ts‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
StringWrapper,
1616
isPrimitive,
1717
isPresent,
18+
isBlank,
1819
looseIdentical
1920
} from 'angular2/src/facade/lang';
2021

@@ -24,6 +25,7 @@ const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
2425
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => SelectControlValueAccessor), multi: true}));
2526

2627
function _buildValueString(id: string, value: any): string {
28+
if (isBlank(id)) return `${value}`;
2729
if (!isPrimitive(value)) value = "Object";
2830
return StringWrapper.slice(`${id}: ${value}`, 0, 50);
2931
}
@@ -70,7 +72,10 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
7072
return null;
7173
}
7274

73-
_getOptionValue(valueString: string): any { return this._optionMap.get(_extractId(valueString)); }
75+
_getOptionValue(valueString: string): any {
76+
let value = this._optionMap.get(_extractId(valueString));
77+
return isPresent(value) ? value : valueString;
78+
}
7479
}
7580

7681
/**
@@ -93,14 +98,21 @@ export class NgSelectOption implements OnDestroy {
9398
if (isPresent(this._select)) this.id = this._select._registerOption();
9499
}
95100

96-
@Input()
97-
set value(value: any) {
101+
@Input('ng-value')
102+
set ngValue(value: any) {
98103
if (this._select == null) return;
99104
this._select._optionMap.set(this.id, value);
100105
this._setElementValue(_buildValueString(this.id, value));
101106
this._select.writeValue(this._select.value);
102107
}
103108

109+
@Input('value')
110+
set value(value: any) {
111+
if (this._select == null) return;
112+
this._setElementValue(value);
113+
this._select.writeValue(this._select.value);
114+
}
115+
104116
_setElementValue(value: string): void {
105117
this._renderer.setElementProperty(this._element.nativeElement, 'value', value);
106118
}

‎modules/angular2/test/common/forms/integration_spec.ts‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -396,10 +396,11 @@ export function main() {
396396
var select = fixture.debugElement.query(By.css("select"));
397397
var sfOption = fixture.debugElement.query(By.css("option"));
398398

399-
expect(select.nativeElement.value).toEqual("0: SF");
399+
400+
expect(select.nativeElement.value).toEqual("SF");
400401
expect(sfOption.nativeElement.selected).toBe(true);
401402

402-
select.nativeElement.value = "1: NYC";
403+
select.nativeElement.value = "NYC";
403404
dispatchEvent(select.nativeElement, "input");
404405

405406
expect(fixture.debugElement.componentInstance.form.value).toEqual({"city": 'NYC'});
@@ -423,20 +424,21 @@ export function main() {
423424

424425
fixture.debugElement.componentInstance.form =
425426
new ControlGroup({"city": new Control("NYC")});
427+
426428
fixture.debugElement.componentInstance.data = ['SF', 'NYC'];
427429
fixture.detectChanges();
428430
tick();
429431

430432
var select = fixture.debugElement.query(By.css("select"));
431-
expect(select.nativeElement.value).toEqual("1: NYC");
433+
expect(select.nativeElement.value).toEqual("NYC");
432434
})));
433435

434436
it("with option values that are objects",
435437
inject([TestComponentBuilder, AsyncTestCompleter],
436438
(tcb: TestComponentBuilder, async) => {
437439
var t = `<div>
438440
<select [(ngModel)]="selectedCity">
439-
<option *ngFor="#c of list" [value]="c">{{c['name']}}</option>
441+
<option *ngFor="#c of list" [ng-value]="c">{{c['name']}}</option>
440442
</select>
441443
</div>`;
442444

@@ -468,7 +470,7 @@ export function main() {
468470
(tcb: TestComponentBuilder, async) => {
469471
var t = `<div>
470472
<select [(ngModel)]="selectedCity">
471-
<option *ngFor="#c of list" [value]="c">{{c['name']}}</option>
473+
<option *ngFor="#c of list" [ng-value]="c">{{c['name']}}</option>
472474
</select>
473475
</div>`;
474476

@@ -496,23 +498,23 @@ export function main() {
496498
(tcb: TestComponentBuilder, async) => {
497499
var t = `<div>
498500
<select [(ngModel)]="selectedCity">
499-
<option *ngFor="#c of list" [value]="c">{{c}}</option>
501+
<option *ngFor="#c of list" [ng-value]="c">{{c}}</option>
500502
</select>
501503
</div>`;
502504
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
503505

504506
var testComp: MyComp = fixture.debugElement.componentInstance;
505-
testComp.list = ["SF", "NYC"];
507+
testComp.list = [{"name": "SF"}, {"name": "NYC"}];
506508
testComp.selectedCity = testComp.list[1];
507509
fixture.detectChanges();
508510

509511
var select = fixture.debugElement.query(By.css("select"));
510-
expect(select.nativeElement.value).toEqual("1: NYC");
512+
expect(select.nativeElement.value).toEqual("1: Object");
511513

512514
testComp.list.pop();
513515
fixture.detectChanges();
514516

515-
expect(select.nativeElement.value).not.toEqual("1: NYC");
517+
expect(select.nativeElement.value).not.toEqual("1: Object");
516518
async.done();
517519
});
518520
}));
@@ -522,20 +524,20 @@ export function main() {
522524
(tcb: TestComponentBuilder, async) => {
523525
var t = `<div>
524526
<select [(ngModel)]="selectedCity">
525-
<option *ngFor="#c of list; trackBy:customTrackBy" [value]="c">{{c}}</option>
527+
<option *ngFor="#c of list; trackBy:customTrackBy" [ng-value]="c">{{c}}</option>
526528
</select>
527529
</div>`;
528530

529531
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
530532

531533
var testComp = fixture.debugElement.componentInstance;
532534

533-
testComp.list = ["SF", "NYC"];
535+
testComp.list = [{"name": "SF"}, {"name": "NYC"}];
534536
testComp.selectedCity = testComp.list[0];
535537
fixture.detectChanges();
536538

537539
testComp.list[1] = "Buffalo";
538-
testComp.selectedCity = "Buffalo";
540+
testComp.selectedCity = testComp.list[1];
539541
fixture.detectChanges();
540542

541543
var select = fixture.debugElement.query(By.css("select"));
@@ -552,25 +554,25 @@ export function main() {
552554
(tcb: TestComponentBuilder, async) => {
553555
var t = `<div>
554556
<select [(ngModel)]="selectedCity">
555-
<option *ngFor="#c of list" [value]="c">{{c}}</option>
557+
<option *ngFor="#c of list" [ng-value]="c">{{c}}</option>
556558
</select>
557559
</div>`;
558560

559561
tcb.overrideTemplate(MyComp, t).createAsync(MyComp).then((fixture) => {
560562

561563
var testComp = fixture.debugElement.componentInstance;
562564

563-
testComp.list = ["NYC", "SF", "SF"];
565+
testComp.list = [{"name": "NYC"}, {"name": "SF"}, {"name": "SF"}];
564566
testComp.selectedCity = testComp.list[0];
565567
fixture.detectChanges();
566568

567-
testComp.selectedCity = "SF";
569+
testComp.selectedCity = testComp.list[1];
568570
fixture.detectChanges();
569571

570572
var select = fixture.debugElement.query(By.css("select"));
571573
var firstSF = fixture.debugElement.queryAll(By.css("option"))[1];
572574

573-
expect(select.nativeElement.value).toEqual("1: SF");
575+
expect(select.nativeElement.value).toEqual("1: Object");
574576
expect(firstSF.nativeElement.selected).toBe(true);
575577
async.done();
576578
});
@@ -581,7 +583,7 @@ export function main() {
581583
(tcb: TestComponentBuilder, async) => {
582584
var t = `<div>
583585
<select [(ngModel)]="selectedCity">
584-
<option *ngFor="#c of list" [value]="c">{{c['name']}}</option>
586+
<option *ngFor="#c of list" [ng-value]="c">{{c['name']}}</option>
585587
</select>
586588
</div>`;
587589

‎tools/public_api_guard/public_api_spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,7 @@ const COMMON = [
780780
'NgSelectOption.constructor(_element:ElementRef, _renderer:Renderer, _select:SelectControlValueAccessor)',
781781
'NgSelectOption.id:string',
782782
'NgSelectOption.ngOnDestroy():any',
783+
'NgSelectOption.ngValue=(value:any)',
783784
'NgSelectOption.value=(value:any)',
784785
'NgStyle',
785786
'NgStyle.constructor(_differs:KeyValueDiffers, _ngEl:ElementRef, _renderer:Renderer)',

0 commit comments

Comments
 (0)
X Tutup