我想这一行动的成功回调后禁用div标签。
请看看我的离子含量
<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>
这里是我的.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);
}
})
}
}
我试图
[ngClass]
,但我不能让我的DIV标签禁用成功后的回调。
我使用[disabled]
但不工作也试过
这里是禁止div标签,但在我的情况不工作一demo
我的要求是让我输入字段和按钮,成功后的回调被禁用
你可以添加属性
<div [attr.disabled]="isDisabled ? true : null">
但<div>
不支持disabled
属性。
也许这就是你想要的
<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
[class.isDisabled]="isDisabled"></div>
一些自定义CSS,使.isDiabled
照看残疾。
这可能是更好的创建将代码放在那里,而不是在线的方法。
div元素不能像表单控件被禁用。您可以在DIV禁用表单控件来代替。
提供的示例具有自定义类“已禁用”
styles: [`
.button {
width: 120px;
border: medium solid black;
}
.active {
background-color: red;
}
.disabled {
color: gray;
border: medium solid gray;
}
`]