Angular 2- changes in ngModel not reflecting in dropdown

Question

So I have a very simple scenario where there's a confirmation popup to be shown on dropdown change. If the user chooses to cancel, I need to revert the dropdown value to old one. I think I'm doing correctly and even in the DOM, value of ngModel bound with select is reflecting. But somehow it's not reverting the selected value in display. Here's my code

<select style="display: inline-block;width: 20%" class="form-control" 
  name="selectedClientVersion" 
  (change)="selectedCurrentVersion($event.target.value)" 
           [(ngModel)]="selectedClientVersion">
           <option *ngFor="let i of clientVersions" 
           [selected]="i == 'selectedClientVersion' ">{{i}}</option>
  </select>

selectedClientVersion='version1';
  prevSelectedClientVersion='version1';
  clientVersions=['version1', 'version2', 'version3'];
  selectedCurrentVersion(val){
    var r = confirm("Do you really want to chnage?");
    if (r == true) {
        this.prevSelectedClientVersion= this.selectedClientVersion= val;

    } else {
       this.selectedClientVersion=this.prevSelectedClientVersion;
       //return false;
    }
  }

P.S I tried ngModelChange too in place of change. Update: I have already searched on stackOverflow for similar answer and found none of the scenario handles this case where there's an involvement of confirmation popup and the values have to be reverted based on that in Angular 2

UPDATE2: This is what I want to do, albeit in angular 2: Reset back to previous option on Select field if js Confirm returns false http://jsfiddle.net/CZ8F9/

@Aravind Please read and understand the question carefully. don't make assumptions just by reading the title — ABGR, Jul 17 '17 at 11:01
Remove quotes from `selectedClientVersion` in `[selected]="i == 'selectedClientVersion' "` and write as `[selected]="i == selectedClientVersion "` — Sai M., Jul 17 '17 at 11:07
@SaiUnique yeah done those already. all possible trial and errors — ABGR, Jul 17 '17 at 11:13

Nehal · Accepted Answer · 2017-07-17T14:28:40.143

The solution I could come up with is to create a reference of the previously selected object/value and pass it with the function when ngModelChange triggers it. I had to some research on how to set value for select from component. Here's my example code:

html:

<select #selectBox
            [(ngModel)]="selectedClientVersion" 
            (ngModelChange)="selectedCurrentVersion(prevSelectedClientVersion, selectedClientVersion, selectBox)" 
            (focus)="prevSelectedClientVersion=selectedClientVersion">
        <option *ngFor="let i of clientVersions" 
                [ngValue]="i"> 
          {{ i.value }}
        </option>
 </select>

component.ts:

selectedCurrentVersion(prevObj, currObj, selectbox){

    var r = confirm("Do you really want to change?");
    if (r == true) {
      this.selectedClientVersionObj = currObj;
    }
    else{
      selectbox.selectedIndex = this.clientVersions.indexOf(prevObj);
      this.selectedClientVersionObj = prevObj;
      this.selectedClientVersion = prevObj;
    }

}

Plunker demo

Hope this helps :)

Thanks this works :) However, just wonder why we still need to manipulate DOM through javascript . It would have been better handling in pure Angular2. Isn't it? — ABGR, Jul 17 '17 at 14:22
I have updated the answer to pass DOM element reference instead of using `document`, that's the most angularish solution I can think of :) — Nehal, Jul 17 '17 at 14:29

score 0 · Answer 2 · answered Jul 17 '17 at 11:07

0

You should be using an empty option

<select [(ngModel)]="selectedValue">
    <option [ngValue]="''"></option>
      <option *ngFor="let value of values$ | async"
              [ngValue]="value">{{ value }}
      </option>
    </select>


reset(){
    this.selectedValue='';
  }

Note: You are not using ngValue without which selected item is not assigned to ngModel variable

LIVE DEMO

answered Jul 17 '17 at 11:07

Aravind

40,391
16
91
110

It's fine if you trigger it from an external button. But I have to get it through on change method – ABGR Jul 17 '17 at 11:12
use `(ngModelChange)` event instead of `(change)`. Refer this [**answer**](https://stackoverflow.com/questions/44610183/angular-2-passing-data-into-a-for-loop/44610213#44610213) – Aravind Jul 17 '17 at 11:22

Angular 2- changes in ngModel not reflecting in dropdown

2 Answers2

Linked