web-dev-qa-db-fra.com

Comment désactiver la balise div dans angular 2

J'essaie de désactiver la balise div après un rappel réussi de cette action. 

s'il vous plaît regardez mon contenu en ions

<ion-content padding class="forgot-password">
  <div [ngClass]="{active: isOn,disabled: isDisabled}">
    <ion-item>
        <ion-label floating>Email/Mobile</ion-label>
        <ion-input type="text" [(ngModel)]="loginId"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="generateOTP(!isOn);">Send OTP</button><br><br><br>
  </div>
  <br>

  <div *ngIf="showRePasswd">
    <ion-item>
        <ion-label floating>Enter OTP</ion-label>
        <ion-input type="text" [(ngModel)]="passwd"></ion-input>
    </ion-item> <br><br>

    <button class="float-right" (click)="resetPassword();">Send Password</button>
  </div>
</ion-content>

voici mon fichier .ts

export class ForgotPasswordPage {

    public loginId = "";
    public passwd = "";

  public showRePasswd = false;
  isDisabled = false;
  isOn = false;

  constructor(private navCtrl: NavController, private logger: Logger, private user: Users) {

  }

  generateOTP(newstate) {
    this.logger.info("invoking generateOTP FN");
    var _this = this;
    this.user.generateOTP(this.loginId, function(result,data){
      if(result == '1') {
        alert(data);
        _this.showRePasswd = !_this.showRePasswd;
        _this.isDisabled = true;
        _this.isOn = newstate;
      }
      else {
        //this.showRePasswd = this.showRePasswd;
        alert(data);
      }
    })
  }

  resetPassword() {
    this.logger.info("invoking resetPassword FN");
    var _this = this;

    this.user.resetPassword(this.passwd, function(result,data) {
      if(result == '1') {
        alert(data);
        _this.navCtrl.Push(LoginPage);
      }
      else {
        alert(data);
      }
    })
  }
}

J'ai essayé [ngClass] mais je ne parviens pas à désactiver la balise div après le rappel de succès.

J'ai aussi essayé d'utiliser [disabled] mais ne fonctionne pas

Voici un demo pour désactiver une balise div mais dans mon cas ne fonctionne pas

Mon exigence est de rendre mon champ de saisie et mon bouton désactivés après un rappel réussi

angularionic2
9
Mohan Gopi

Vous pouvez ajouter l'attribut comme

<div [attr.disabled]="isDisabled ? true : null">

mais <div> ne prend pas en charge l'attribut disabled.

C'est peut-être ce que tu veux

<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

avec certains CSS personnalisés qui donnent à .isDiabled l’air désactivé.

Il serait peut-être préférable de créer une méthode pour mettre le code là-bas au lieu de inline.

15
Günter Zöchbauer

L'élément div ne peut pas être désactivé comme les contrôles de formulaire. Vous pouvez également désactiver les contrôles de formulaire dans div.

L'exemple fourni a une classe personnalisée "désactivée"

styles: [`
    .button {
      width: 120px;
      border: medium solid black;
    }

    .active {
      background-color: red;
    }

    .disabled {
      color: gray;
      border: medium solid gray;
    }
  `]
0
jmachnik