Angular2 अक्षम बटन

Question

मुझे पता है कि कोणीय 2 में मैं [disable]विशेषता के साथ एक बटन को अक्षम कर सकता हूं , उदाहरण के लिए:

<button [disabled]="!isValid" (click)="onConfirm()">Confirm</button>

लेकिन क्या मैं इसका उपयोग कर सकता हूं [ngClass]या [ngStyle]? इस तरह:

<button [ngStyle]="{disabled : !isValid}" (click)="onConfirm()">Confirm</button>

धन्यवाद।

Comments

यहाँ एक ही plnkr.co/edit/MW3vT4XscWcKrDdAwBoE?p=preview के लिए काम कर रहा है

— जैन

Answer 1

अपडेट करें

मैं भटक रहा हूँ। आप [disabled]कोणीय 2 द्वारा प्रदान की गई विशेषता बाइंडिंग का उपयोग क्यों नहीं करना चाहते हैं ? यह इस स्थिति से निपटने का सही तरीका है। मैं प्रस्ताव करता हूं कि आप isValidघटक विधि के माध्यम से अपनी जांच को आगे बढ़ाएं।

<button [disabled]="! isValid" (click)="onConfirm()">Confirm</button>

आपके द्वारा बताई गई समस्या के बारे में नीचे बताया गया है

मूल रूप से आप ngClassयहाँ उपयोग कर सकते हैं । लेकिन कक्षा जोड़ने से घटना को गोलीबारी से प्रतिबंधित नहीं किया जाएगा। मान्य इनपुट पर ईवेंट अप करने के लिए, आपको clickइवेंट कोड को नीचे बदलना चाहिए । ताकि onConfirmफील्ड वैलिड होने पर ही फायरिंग हो।

<button [ngClass]="{disabled : !isValid}" (click)="isValid && onConfirm()">Confirm</button>

यहाँ डेमो

Comments

वैसे मैं उस ngClass को पहले से ही बटन में जोड़ देता हूँ, इसलिए इसके लिए मुझे लगता है कि विकलांग को उपचार करने की आवश्यकता है, क्यों [विकलांग] तरीका पसंद नहीं है?

— नीर श्वार्ट्ज

@NirSchwartz क्योंकि यह एक समय में दोनों काम करेगा .. चयनकर्ता सीएसएस नियम button[disabled]चयनकर्ता आधारित और अक्षम घटना पर लागू होगा clickघटना को बटन पर आग लगाने के लिए प्रतिबंधित करेगा .. ngClassक्लास चीज़ में आपको इसे खुद से संभालने की आवश्यकता है, जैसा कि मैंने दिखाया उपरोक्त उत्तर ..

— पंकज पारकर

लोग [अक्षम] के बजाय [attr.disabled] का उपयोग क्यों करना चाहते हैं इसका कारण यह है कि कोणीय FormControl के [विकलांग] को गतिशील रूप से सेट नहीं किया जा सकता है। यहाँ मुद्दा है github.com/angular/angular/issues/11271

— davyzhang

आपको टेम्पलेट बाइंडिंग में एक विधि नहीं कहनी चाहिए। [disabled]="!isValid"

— टॉम

अहहा .. अगर विधि में सिर्फ एक चर संदर्भ है, तो इसका ठीक है .. यदि आपके पास किसी फ़ंक्शन के अंदर जटिल तर्क है, तो यह पसंद नहीं है। आप सही हैं, इस मामले में मैं isValidयूआई पर सीधे झंडा

— पंकज पारकर

Answer 2

मैं निम्नलिखित की सिफारिश करूंगा।

<button [disabled]="isInvalid()">Submit</button>

Comments

क्या html में फ़ंक्शन कॉल से बचना बेहतर नहीं है, क्योंकि इसे प्रत्येक टिक / चक्र कहा जाएगा?

— जॉन

Answer 3

हाँ तुम कर सकते हो

<div class="button" [ngClass]="{active: isOn, disabled: isDisabled}"
         (click)="toggle(!isOn)">
         Click me!
 </div>

https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

Answer 4

यदि आपके पास एक फॉर्म है तो निम्नलिखित भी संभव है:

<form #f="ngForm">
    <input name="myfield" type="text" minlenght="3" required ngModel>
    <button type="submit" [disabled]="!f.valid">Submit</button>
</form>

यहां डेमो: http://plnkr.co/edit/Xm2dCwqB9p6Wygrquugh?p=preview&open=app%2Fapp.component.ts

Answer 5

ngClassअमान्य रूप के लिए बटन को अक्षम करने के लिए उपयोग करना Angular2 में अच्छा अभ्यास नहीं है जब इसकी इनबिल्ट सुविधाएँ प्रदान करता है और बटन को सक्षम करने और अक्षम करने के लिए यदि कोई अतिरिक्त प्रयास / तर्क किए बिना फ़ॉर्म वैध और अमान्य है।

[disabled] सभी काम करेगा जैसे अगर फॉर्म वैध है तो इसे सक्षम किया जाएगा और यदि फॉर्म अमान्य है तो यह स्वचालित रूप से अक्षम हो जाएगा।

उदाहरण देखें:

<form (ngSubmit)="f.form.valid" #f="ngForm" novalidate>
<input type="text" placeholder="Name" [(ngModel)]="txtName" name="txtname" #textname="ngModel" required>
<input type="button" class="mdl-button" [disabled]="!f.form.valid" (click)="onSave()" name="">

Answer 6

नीचे हो सकता है कोड मदद कर सकता है:

<button [attr.disabled]="!isValid ? true : null">Submit</button>

Comments

यह तब से एक अच्छा समाधान नहीं है <button disabled="">या <button disabled="false">अभी भी अधिकांश ब्राउज़रों में एक अक्षम बटन की तरह संभाला हुआ है

— बिलीटॉम

Answer 7

मैंने क्लिक इवेंट के साथ विकलांगों का उपयोग करने की कोशिश की। नीचे स्निपेट है, स्वीकृत उत्तर भी पूरी तरह से ठीक है, मैं इस उत्तर को एक उदाहरण देने के लिए जोड़ रहा हूं कि इसे कैसे अक्षम और क्लिक गुणों के साथ उपयोग किया जा सकता है।

<button (click)="!planNextDisabled && planNext()" [disabled]="planNextDisabled"></button>

Answer 8

यदि आप प्रतिक्रियाशील रूपों का उपयोग कर रहे हैं और प्रपत्र नियंत्रण से जुड़े कुछ इनपुट को अक्षम करना चाहते हैं, तो आपको इस disabledतर्क को कोड में रखना चाहिए और कॉल करना चाहिए yourFormControl.disable()याyourFormControl.enable()

Answer 9

मुझे लगता है कि यह सबसे आसान तरीका है

<!-- Submit Button-->
<button 
  mat-raised-button       
  color="primary"
  [disabled]="!f.valid"
>
  Submit
</button>

Answer 10

 <button [disabled]="this.model.IsConnected() == false"
              [ngClass]="setStyles()"
              class="action-button action-button-selected button-send"
              (click)= "this.Send()">
          SEND
        </button>

.ts कोड

setStyles() 
{
    let styles = {

    'action-button-disabled': this.model.IsConnected() == false  
  };
  return styles;
}