Bind and fetch dropdown list value in typescript and Angular2

Question

This question was asked many times and couldn't help me with my problem. Not sure whats wrong with the approach and hope some fresh "eyes"

Here is my dropdownlist binding in HTML: I am binding programName which is a string to both value and text properties.

<select [ngModel]="selectedObject">
   <option *ngFor="let p of programs" value= {{p.programName}}>
         {{p.programName}}
   </option>
</select>

In my .ts file, here is the what i am doing to bind the default value to the "select"

 loadData(pList: IProgram[]) {
    this.programs = pList;
    if (this.programs.length > 0) {
        this.selectedObject = this.programs[0];
    }
}

The data is binding to "select" properly,

but the default value is showing as empty text, where i need to click and select an value.
Another issue is when i change the dropdown value from A to B, the "selectedObject" value is always giving me "A" instead of "B". As it is [ngModel], two way binding would take care. But, its not happening as i might be missing something here.

Can someone help whats the problem with this approach?

Madhu Ranjan · Accepted Answer · 2017-04-19 19:19:55Z

1

try below,

<select [(ngModel)]="selectedObject">
   <option *ngFor="let p of programs" 
           [ngValue] = "p"
           [selected]="p.programName == selectedObject.programName"
          >
         {{p.programName}}
   </option>
</select>

Check this Plunker!!

Hope this helps!!

edited Apr 19, 2017 at 19:19

answered Apr 19, 2017 at 18:10

Madhu Ranjan

18k7 gold badges65 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Born2Code Over a year ago

No, it didn't work with this fix. Even after this, the default value is empty and changed value was still showing as first value "A" instead of "B".

Madhu Ranjan Over a year ago

@Born2Code Ah, value binding was off too, it should be [value] = "p", rather than value= {{p.programName}}, Cheers!!

Born2Code Over a year ago

Thanks Madhu. That fixed my first issue of defaulting the value instead of empty selection. The second issue still exists, I was doing below code to load the selected value getmyData() { this._myService.getPayments(this.selectedObject.programName) .subscribe(pl => this.loadmyData(pl), error => this.errorMessage = <any>error, () => this.showLoader = false); }

Madhu Ranjan Over a year ago

Updated Plunker, use ngValue instead.

Born2Code Over a year ago

Thanks again ! I have updated the plunker and validated, with this <h3>selected value: {{selectedObject.programName}}</h3> and still see the selected value as A when selected with "B". Wondering if (onChange) needs to be added? In other case, it should not as the binding already exists.

|

Born2Code · Accepted Answer · 2017-04-19 19:28:08Z

0

Basically, the problem is when declaring [ngModel]. It should be within [(ngModel)] which was missed in my original problem. :)

Thanks a lot to Madhu Ranjan for help on the fix !

After correcting (ngModel) able to bind and fetch successfully.

<select [**(ngModel)**]="selectedObject"><option *ngFor="let p of programs"value= {{p.programName}}>{{p.programName}}</option> </select>

answered Apr 19, 2017 at 19:28

Born2Code

1371 gold badge5 silver badges22 bronze badges

Collectives™ on Stack Overflow

Bind and fetch dropdown list value in typescript and Angular2

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related