CODEWITHSUNDEEP
angular
ABGR
ABGR

Reputation: 5235

Angular 2- changes in ngModel not reflecting in dropdown

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

enter image description hereenter image description here

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/

Upvotes: 3

Views: 4171

Answers (2)

Nehal
Nehal

Reputation: 13307

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 :)

Upvotes: 3

Aravind
Aravind

Reputation: 41581

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

Upvotes: 0

Related Questions