如果没有输入选择,如何启用/禁用Ionic> = 2提醒按钮

时间:2017-04-16 08:05:46

标签: angular ionic-framework ionic2

我有一个带有单选按钮选项的离子警报,并且想要禁用“确定”按钮,直到用户做出选择。与this post非常相似,除了我想在警报本身的动作上执行此操作并且能够更新按钮"启用",所以我的设置将如下所示

  import { AlertController } from 'ionic-angular';

    export class MessageService {
      constructor(private alertCtrl: AlertController) {
      }

      presentAlert() {
        let alert = this.alertCtrl.create();

        alert.addInput({
          type: 'radio',
          label: 'Option 1',
          value: 'value1',
          checked : false
        });

        alert.addInput({
          type: 'radio',
          label: 'Option 2',
          value: 'value2',
          checked : false
        });

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

          handler: data => {

          }
        });
        alert.present();
      }
    }

我希望最初禁用ok按钮,但是一旦用户做出选择就会启用。由于离子选择也使用警报,因此能够在那里使用相同的东西会很好。

这可能/有一种简单的方法吗?

提前感谢您的帮助。

2 个答案:

答案 0 :(得分:0)

我可能会迟到但这对我有用。

var bool=true;

然后在addInput

disable:bool

我不知道为什么我必须这样做,但它确实有效。

答案 1 :(得分:0)

尝试一下。

presentPrompt() {
    let alert = this.alertCtrl.create({
      title: 'Cancel Prompt',
      inputs: [
        {
          type:'radio',
          label:'Cancel for reason 1',
          value:'Cancel for reason 1'
        },
        {
            type:'radio',
            label:'Cancel for reason 2',
            value:'Cancel for reason 2'
        }
      ],
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          handler: data => {}
        },
        {
          text: 'OK',
          handler: data => {            
            if (data) {
              console.log(data          
            } else {
              this.presentAlert();
            }
          }
        }
      ]
    });
    alert.present();
  }

  private presentAlert() {
    let alert = this.alertCtrl.create({
      title: 'Validation select',
      subTitle: 'Please select',
      buttons: [{
                text:'Ok',
                handler:data=>{
                  this.presentPrompt();
                }
              }]
    });
    alert.present();
  }