কৌণিক 2 অক্ষম বোতাম

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=

— পারদীপ জৈন

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

ঠিক আছে আমি সেই এনজিগ্লাসটি অলডিডি বোতামে যুক্ত করছি যাতে এটি আমার কাছে মনে হয় যে প্রতিবন্ধীদের আরও থ্রো করা দরকার, কেন [অক্ষম] পথটিকে অগ্রাধিকার দেওয়া হয়?

— নীড় শোয়ার্জ

@ নীরশওয়ার্টজ কারণ এটি একবারে দু'টি কাজই করবে .. নির্বাচক সিএসএস বিধি button[disabled]নির্বাচক ভিত্তিক প্রয়োগ করা হবে এবং অক্ষম ইভেন্টগুলিকে clickইভেন্টটি বোতামে আগুন লাগানো সীমাবদ্ধ করবে .. শ্রেণিক বিষয়তে ngClassআপনার নিজেরাই এটি পরিচালনা করতে হবে, যেমন আমি দেখিয়েছি উপরের উত্তর ..

— পঙ্কজ পার্কার

কেন লোকেরা [অক্ষম] পরিবর্তে [অ্যাট্রিডিজড] ব্যবহার করতে চায় তার কারণ হ'ল কৌণিক ফর্মকন্ট্রোল [অক্ষম] গতিশীলভাবে সেট করা যায় না। সমস্যাটি এখানে github.com/angular/angular/issues/11271

— davyzhang

কোনও টেম্পলেট বাইন্ডিংয়ে আপনাকে কোনও পদ্ধতি কল করা উচিত নয়। [disabled]="!isValid"

— টম

আহাআ .. যদি পদ্ধতিটির কেবলমাত্র একটি পরিবর্তনশীল রেফারেন্স থাকে তবে এটির জরিমানা .. যদি কোনও ফাংশনের অভ্যন্তরে আপনার যদি জটিল যুক্তি থাকে তবে এটি পছন্দ হয় না। আপনি সঠিক, এই ক্ষেত্রে আমি সরাসরি isValid

— ইউআইতে

Answer 2

আমি নিম্নলিখিত সুপারিশ করবে।

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

Comments

এইচটিএমএলে ফাংশন কলগুলি এড়ানো ভাল নয়, কারণ এটি প্রতিটি টিক / চক্র বলা হবে?

— জন

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= পূর্বরূপ&open=app%2Fapp.componal.ts

Answer 5

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 6

কোড নীচে হতে পারে সাহায্য করতে পারেন:

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

Comments

এই যেহেতু একটি ভাল সমাধান নয় <button disabled="">বা <button disabled="false">এখনও অধিকাংশ ব্রাউজার একটি প্রতিবন্ধী বোতাম মত পরিচালিত হয়

— BillyTom

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;
}