ion-select value for dirty/valid/pristine/touched/value not getting updated using FormControlName

Question

Try the following HTML and controller code for ionic2/angular2:

<ion-content class="home">

  <ion-list>
    <form [formGroup]="consoleTypeForm">
      <ion-item>
        <ion-label>Gaming</ion-label>
        <ion-select FormControlName="consoleType" (ionChange)="printSV($event)">
          <ion-option value="nes">NES</ion-option>
          <ion-option value="n64">Nintendo64</ion-option>
          <ion-option value="ps">PlayStation</ion-option>
          <ion-option value="genesis">Sega Genesis</ion-option>
          <ion-option value="saturn">Sega Saturn</ion-option>
          <ion-option value="snes">SNES</ion-option>
        </ion-select>
      </ion-item>
    </form>
</ion-list>

</ion-content>

Controller class:

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  templateUrl: 'home.html'
})
export class HomePage {
  consoleTypeForm: FormGroup;

  constructor(public nav: NavController, public menu: MenuController, public     formBuilder: FormBuilder) {
    this.consoleTypeForm = formBuilder.group({
      consoleType: ['', Validators.required],
    });

    const ctrl = this.consoleTypeForm.controls['consoleType'];

    console.log("In constructor -- valid is " + ctrl.valid);
    console.log("In constructor -- touched is " + ctrl.touched);
    console.log("In constructor -- invalid is " + ctrl.invalid);
    console.log("In constructor -- pristine is " + ctrl.pristine);
    console.log("In constructor -- Dirty is " + ctrl.dirty);
  }

  printSV(value)
  {
    const ctrl = this.consoleTypeForm.controls['consoleType'];

    console.log("valid is " + ctrl.valid);
    console.log("touched is " + ctrl.touched);
    console.log("invalid is " + ctrl.invalid);
    console.log("pristine is " + ctrl.pristine);
    console.log("Dirty is " + ctrl.dirty);
    console.log("Ctrl Value is " + ctrl.value);
    console.log("Value is " + value);
  }
}

The values printed from constructor and "printSV" are the same, even after you select a value. Can someone point out the mistake? Or, is this a big?

ionic info output is: Ionic Framework: 2.0.0-rc2 Ionic CLI: 2.1.0 Ionic App Lib Version: 2.1.0-beta.1

jdm jdm · Accepted Answer · 2016-11-13T06:51:35

Changing

<ion-select FormControlName="consoleType" (ionChange)="printSV($event)">

to

<ion-select formControlName="consoleType" (ionChange)="printSV($event)">

solves the issue

ion-select value for dirty/valid/pristine/touched/value not getting updated using FormControlName

1 Answers