如果没有输入选择，如何启用/禁用 Ionic >=2 警报按钮

Question

我有一个带有单选按钮选项的 Ionic 警报，并且希望在用户做出选择之前禁用“确定”按钮。与这篇文章非常相似，除了我想通过警报本身的操作来执行此操作，并且能够更新按钮“启用”，所以我的设置如下

  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();
      }
    }

我希望“确定”按钮最初被禁用，但在用户做出选择后立即启用。由于离子选择也使用警报，因此能够在那里使用相同的东西会很好。

这可能吗/有没有简单的方法可以做到这一点？

提前感谢您的帮助。

Answer 1

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

var bool=true;

然后在addInput

disable:bool

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

Answer 2

试试这个。

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();
  }

Answer 3

我有类似的问题并通过以下方式解决：

CSS（globl.scss 以使其按照文档中所写的方式应用）：

button.alert-button.delete-button{
  background-color: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
}

button.alert-button.delete-button:disabled{
  background-color: var(--ion-color-danger);
  color: var(--ion-color-danger-contrast);
  opacity: 0.6;
  cursor: not-allowed;
}

TS：

   public deleteAlertButtons = [
        {
            text: 'Abbrechen',
            role: 'cancel',
            handler: () => {
            },
        },
        {
            text: 'Löschen',
            role: 'delete',
            id: 'alert-delete-button',
            cssClass: 'delete-button',
            handler: (data: string) => {

            },
        }
    ];

    public deleteAlertInputs = [
        {
            type: 'checkbox',
            label: 'Ja, ich habe verstanden und möchte meinen Account permanent löschen.',
            handler: () => {
                const deleteButton =
                    document.getElementById('alert-delete-button') as HTMLButtonElement;
                if (deleteButton) {
                    deleteButton.disabled = !deleteButton.disabled;
                }
            },
        }
    ];

HTML：

<ion-alert trigger="delete-alert"
           header="Möchtest du deinen Account wirklich löschen?"
           message="Dieser Vorgang ist permanent und kann nicht mehr rückgängig gemacht werden!"
           [buttons]="deleteAlertButtons"
           [inputs]="deleteAlertInputs"
           (willPresent)="willPresent()"
           backdrop-dismiss="true"></ion-alert>

willPresent() 方法在显示警报之前应用，因此我们可以将按钮设置为禁用并相应地应用 css。