Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable the div tag in angular 2

Tags:

I am trying to disable the div tag after a success callback of that action.

please look my ion-content

<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>

here is my .ts file

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

I tried [ngClass] but i am not able to make my div tag disable after the success callback.

I also tried using [disabled] but not working

Here is a demo for disable a div tag but in my case not working

My requirement is to make my input field and button to be disabled after success callback

like image 883
Mohan Gopi Avatar asked Sep 06 '16 10:09

Mohan Gopi


People also ask

Can we disable div in angular?

Div element cannot be disabled like form controls. You can disable form controls in div instead.

Can you disable a div?

Nope! Divs can't be disabled. Only form and form elems. Actually in Quirks-mode IE can disable a div , but it only grays button texts, it doesn't prevent events firing.

How do I disable ng container?

The ng-disabled directive sets the disabled attribute of a form field (input, select, or textarea). The form field will be disabled if the expression inside the ng-disabled attribute returns true. The ng-disabled directive is necessary to be able to shift the value between true and false .

What is ATTR disabled angular?

disabled will disable an element whether it is true or false, it's presence means that the element will be disabled. Angular will not add the disabled element at all for [disabled]="variable" if variable is false.


2 Answers

You can add the attribute like

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

but <div> doesn't support the disabled attribute.

Perhaps this is what you want

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

with some custom CSS that makes .isDiabled look disabled.

It might be better to create a method to put the code there instead of inline.

like image 200
Günter Zöchbauer Avatar answered Sep 22 '22 14:09

Günter Zöchbauer


You can use CSS property pointer-events: none; in your tag div:

<ion-content padding class="forgot-password">
  <div style="pointer-events: none;">
   ...
  </div>
</ion-content>
like image 21
Lidiya Parshina Avatar answered Sep 21 '22 14:09

Lidiya Parshina