如何在角度2禁用div標記

我試圖在成功回調該操作後禁用div標記。如何在角度2禁用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沒有工作

我的要求是讓我輸入字段和按鈕嘗試成功回調後禁用

來源

2016-09-06 Mohan Gopi

您可以添加屬性類似

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

但<div>不支持disabled屬性。

也許這就是你想要

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

一些自定義CSS，使.isDiabled照看殘疾什麼。

創建一個將代碼放在那裏而不是內聯的方法可能會更好。

來源

2016-09-06 11:08:14

insted使用ngClass我試過你的答案，但我仍然能夠編輯我的輸入字段在我的div標記 –

'div'不能被禁用（HTML限制，而不是Angular2限制）。您可以設置'disabled'屬性並應用CSS，或者在所有可以單獨禁用的子元素上設置'disabled'。 –

要添加到@MohanGopi所說的內容中，（click）具有[attr.disabled]集的div的事件也會生成。所以我們不能禁用該div的點擊。 – shanti

Div元素不能像表單控件一樣禁用。您可以禁用div中的表單控件。

提供的示例具有自定義類「已禁用」

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

    .active { 
     background-color: red; 
    } 

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

來源

2016-09-06 10:34:08 jmachnik

因爲我已經提到，風格不使用 –

我真的不明白你想達到什麼。你能提供一個理想的效果嗎？ [ngClass] =「{active：isOn，disabled：isDisabled}」>在模板文件中。 – jmachnik

@MohanGopi你也可以建立一個自定義的容器（指令），它將禁用所有需要的孩子。 – jmachnik

如何在角度2禁用div標記

回答

相關問題