Ionic2 won't disable form control

Question

Try the following HTML:

<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>
      <ion-item>
        <ion-label stacked>Business Name</ion-label>
        <ion-input formControlName="myConsole" type="text"></ion-input>
      </ion-item>
    </form>
</ion-list>

</ion-content>

With the following 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],
      myConsole: ['']
    });
  }

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

    ctrlToBeDisabled.enable(false);
    ctrlToBeDisabled.disable({ onlySelf: true });
    ctrlToBeDisabled.disable(true);
    ctrlToBeDisabled.disable();
  }
}

None of the options to disable 'myConsole' work. Can someone please point out the mistake? or, is this a big?

Ionic Framework version: 2.0.0-rc.2, Ionic CLI version:2.1.0 Ionic App Lib Version:2.1.0-beta.1

hgoebl hgoebl · Accepted Answer · 2016-11-05T10:36:38

I haven't executed the code, but from reading I point out at least 2 things:

FormControlName="consoleType" should read formControlName="consoleType"

I'd place creating the FormGroup into ionViewDidLoad() life-cycle method:

ionViewDidLoad() {
  this.consoleTypeForm = formBuilder.group({
    consoleType: ['', Validators.required],
    myConsole: ['']
  });
}

I don't know whether it's causing problems doing it in the constructor, but I've read example code and for me it's working.

The type definition of the AbstractControl has following method to disable a control:

/**
 * Disables the control. This means the control will be exempt from validation checks and
 * excluded from the aggregate value of any parent. Its status is `DISABLED`.
 *
 * If the control has children, all children will be disabled to maintain the model.
 */
disable({onlySelf, emitEvent}?: {
    onlySelf?: boolean;
    emitEvent?: boolean;
}): void;

From that I'd try to disable with:

control.disable();

or

control.disable({onlySelf: true});

Tell me if it helped and in case create a Plunkr so we can play around with your code.

Ionic2 won't disable form control

1 Answers