कोणीय 2

Question

में div टैग को अक्षम करने के लिए मैं उस क्रिया के सफल कॉलबैक के बाद 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 काम नहीं कर रहा

मेरे आवश्यकता है की कोशिश की सफलता कॉलबैक के बाद अक्षम हो जाएं

Answer 1

आप की तरह

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

विशेषता जोड़ सकते हैं लेकिन disabled विशेषता <div> का समर्थन नहीं करता है।

शायद यह है कि तुम क्या करता है कि .isDiabled विकलांग देखने के कुछ कस्टम सीएसएस के साथ चाहते हैं

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

है।

इनलाइन के बजाय कोड डालने का तरीका बनाना बेहतर हो सकता है।

Answer 2

div तत्व को फॉर्म नियंत्रणों जैसे अक्षम नहीं किया जा सकता है। आप इसके बजाय div में फॉर्म नियंत्रण अक्षम कर सकते हैं।

परंतु उदाहरण कस्टम वर्ग "अक्षम"

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

    .active { 
     background-color: red; 
    } 

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