Angular2 को निष्क्रिय बटन

Question

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

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

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

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

धन्यवाद।

Answer 1

अद्यतन

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

isValidForm() { 
    return this.isValid; 
} 

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

तुम क्या करने की कोशिश की के साथ समस्या नीचे

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

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

Demo Here

Answer 2

हाँ आप

<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 3

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

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

Answer 4

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

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

Answer 5

आप ऐसे स्वरूप में हैं उसके बाद निम्न भी संभव है:

<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 6

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

Answer 7

का उपयोग करना चाहिए अमान्य रूप के लिए बटन को अक्षम करने के लिए ngClass एंगुलर 2 में अच्छा अभ्यास नहीं है, जब यह किसी भी अतिरिक्त प्रयास/तर्क के बिना क्रमशः वैध और अमान्य है तो बटन को सक्षम और अक्षम करने के लिए अंतर्निर्मित सुविधाएं प्रदान करता है।

[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 8

हो सकता है नीचे कोड मदद कर सकते हैं: एक ही http://plnkr.co/edit/MW3vT4XscWcKrDdAwBoE के लिए

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

यहाँ