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
Div element cannot be disabled like form controls. You can disable form controls in div instead.
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.
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 .
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With