ionic การ Disable Button | Phaisarn Sutheebanjard

กดที่ปุ่ม Default จะแสดง Alert
กดที่ปุ่ม Toggle จะทำการ Enable/Disalbe ปุ่ม Default

src/pages/home/home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="showAlert()" [disabled]="!isenabled">Default</button>
  <button ion-button (click)="toggle()" color="danger">Toggle</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<button ion-button (click)="showAlert()" [disabled]="!isenabled">Default</button>

<button ion-button (click)="toggle()" color="danger">Toggle</button>

</ion-content>

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  isenabled: boolean = true;

  constructor(public navCtrl: NavController) {
  }

  showAlert() {
    alert("Default Button");
  }

  toggle() {
    this.isenabled = !this.isenabled;
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

isenabled: boolean = true;

constructor(public navCtrl: NavController) {

}

showAlert() {

alert("Default Button");

}

toggle() {

this.isenabled = !this.isenabled;

}

บรรทัดที่ 10 : ตัวแปร isenabled ใช้เก็บค่า Enable/Disalbe ให้ปุ่ม Default

Link

How disable/enable button with ionic 2?