如何将禁用按钮添加到离子2警报 [英] How to add a disabled button to ionic 2 alert

问题描述

我创建了一个ionic2警报，我必须根据条件禁用按钮。

I created an ionic2 alert and I have to disable a button according to a condition.

这是我的代码的简单结构：

This is a simple structure of my code:

import { AlertController } from 'ionic-angular';

export class MyPage {
  constructor(public alertCtrl: AlertController) {
  }

  showCheckbox(condition) {
    let alert = this.alertCtrl.create();
    alert.setTitle('Which planets have you visited?');

    alert.addInput({
      type: 'checkbox',
      label: 'Alderaan',
      value: 'value1',
      checked: true
    });

    alert.addInput({
      type: 'checkbox',
      label: 'Bespin',
      value: 'value2'
    });

    alert.addButton('Cancel');
    alert.addButton({
      text: 'Okay',

      handler: data => {
        console.log('Checkbox data:', data);
        this.testCheckboxOpen = false;
        this.testCheckboxResult = data;
      }
    });
    alert.present();
  }
}

我必须禁用好的按钮，如果给定条件是 true （参数'condition'传递给 showCheckbox（）功能）。

I have to disable Okay button if given condition is true (parameter 'condition' that passed to the showCheckbox() function).

推荐答案

我知道这个问题是在一年前提出的，以防其他人需要它。

I know the question was asked over a year ago, just in case someone other needs it.

我创造了一点，我会说，解决方法，它就像一个魅力。

I've created a little, I would say, "workaround", which works like a charm.

alert.present（）提供 Promise ，因此我们可以在成功创建警报后收听它。

alert.present() offers a Promise, so we can listen to it, after the alert was successfully created.

现在，这就是我所做的：

Now, here's what I've done:

alert.present().then(() => {

    /** disable the confirm button initial */
    document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');
    return;
});

通过 document.querySelector（）访问确认按钮有点麻烦; 和上面的查询，但确认按钮没有我见过的唯一标识符，例如 role =confirm或者这样。

It's a bit hacky to access the confirm button via document.querySelector(); and the above query, but the confirm button does not has a unique identifier as I've seen it, something like role="confirm" or so.

所以你需要编写一个函数，每次点击你的输入都会触发（通过 handler ）。

So You need to write a function, which will be triggered on each click on Your inputs (via handler).

alert.addInput({
   type: 'checkbox',
   label: 'testLabel',
   value: 'testValue',
   handler: () => {
      functionToCheckConfirmButtonState();
   }
});

您需要在 functionToCheckConfirmButtonState（）;中检查您的复选框值。 / code> function并启用确认按钮：

There You need to check Your checkbox values inside the functionToCheckConfirmButtonState(); function and enable the confirm button with:

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').removeAttribute('disabled');

或者再次禁用它：

document.querySelector('ion-alert div.alert-button-group button:nth-of-type(2)').setAttribute('disabled', 'true');

希望我能提供帮助。

干杯
Unkn0wn0x

Cheers Unkn0wn0x

这篇关于如何将禁用按钮添加到离子2警报的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！