Not getting changed value of drop-down in ionic 2

Question

I want to edit the filled form but I don't get the value form the drop-down element

  <ion-item style="background-color:transparent">
    <ion-label required class="label">Class
      <span>
        <b style="color:red">*</b>
      </span>
    </ion-label>
    <ion-select [selectOptions]="selectOptions1" value="{{class}}" placeholder="Select Class" formControlName="class">
      <ion-option *ngFor="let class of plannerDetail.course.class; let i = index" (ionSelect)="setClassIndex(i)" value="{{class.id}}">{{class.course_name}}</ion-option>
    </ion-select>
 </ion-item>

ts file

placeForm: FormGroup;
class: AbstractControl;

constructor(){
this.placeForm.formBuilder.group({
placeId: [’’, Validators.required],
});
this.placeForm.get(‘class’).setValue(myArray.class);
}

Answer 1

You can create a two-way data binding with ngModel like this:

.html

<ion-select [(ngModel)]="myVar">...</ion-select>

.ts

myVar = 'optionValue';

What it basically does is:

• (ngModel)="myVar": when the user changes the option, it will saved into your variable
• [ngModel]="myVar": when you change the value in your .ts file, it will be changed in template aswell

So you can control the ion-select value aswell as your user.

Answer 2

You have to change method of ionSelect to ionChange in ion-select element and give it $event so that you can get class value. Create a function in ts file where you get its value.

<ion-select placeholder="Select Class" formControlName="class" (ionChange)="setClassIndex($event)">
     <ion-option *ngFor="let class of plannerDetail.course.class;let i of index" [value]="class.id">{{class.course_name}}</ion-option>
    </ion-select>

ts file

 placeForm: FormGroup;
     constructor(public navCtrl: NavController,
        public navParams: NavParams,
        private fb: FormBuilder) {
    this.placeForm = this.fb.group({  
          class: [``, Validators.required]
        });
    }
     setClassIndex($e) {
        this.profileForm.value.class = $e;
      }

Hope this will help you!