angular - কৌণিক 2 এ কীভাবে একটি ইনপুট অক্ষম করা যায়




angular-reactive-forms disabled-input (9)

আপনি কেবল এটি করতে পারে

<input [disabled]="true" id="name" type="text">

Ts এ is_edit = true অক্ষম করা is_edit = true ...

<input [disabled]="is_edit=='false' ? true : null" id="name" type="text" [(ngModel)]="model.name" formControlName="name" class="form-control" minlength="2">

আমি কেবল true বা false ভিত্তিক একটি ইনপুট অক্ষম করতে চাই।

আমি নিম্নলিখিত চেষ্টা:

[disabled]="is_edit=='false' ? true : null"
[disabled]="is_edit=='true'"
[disabled]="is_edit"

আপনি যদি কিছু বিবৃতিতে ইনপুট অক্ষম করতে চান। ব্যবহারযোগ্য [readonly]=true অক্ষম পরিবর্তে [readonly]=true বা false

<input [readonly]="this.isEditable" 
    type="text" 
    formControlName="reporteeName" 
    class="form-control" 
    placeholder="Enter Name" required>

আমি এই সমাধান পছন্দ

এইচটিএমএল ফাইলে:

<input [disabled]="dynamicVariable" id="name" type="text">

টিএস ফাইলে:

dynamicVariable = false; // true based on your condition 

আমি মনে করি আপনি 'false' পরিবর্তে false বলতে চেয়েছিলেন

এছাড়াও, [disabled] একটি Boolean আশা করছে। আপনার null ফেরা এড়ানো উচিত।


উপরে ফেডটকের গৃহীত উত্তর সম্পর্কে বেল্টারের মন্তব্যের জবাবে একটি নোট, যেহেতু মন্তব্য যুক্ত করার খ্যাতি আমার নেই lack

মোজিলা ডক্সের সাথে সামঞ্জস্য রেখে আমি সচেতন এমন কারও পক্ষে এটি সত্য নয়

অক্ষম সত্য বা মিথ্যা সমান

যখন অক্ষম বৈশিষ্ট্য উপস্থিত থাকে তখন উপাদানটি নির্বিশেষে অক্ষম করা হয়। এই উদাহরণটি দেখুন

<input placeholder="i can be changed"/>
<input disabled placeholder="i can NOT be changed"/>
<input disabled="true" placeholder="i can NOT be changed"/>
<input disabled="false" placeholder="i can NOT be changed"/>

এবং যদি ইনপুট বাক্স / বোতামটি অক্ষম রাখতে হয় তবে কেবল <button disabled> বা <input disabled> কাজ করে।


সহজভাবে ব্যবহার করতে পারেন

 <input [(ngModel)]="model.name" disabled="disabled" 

আমি এইভাবে এটি পেয়েছিলাম। তাই আমি পছন্দ করি


Demo

টাইপ বুলিয়ান is_edit

<input [disabled]=is_edit id="name" type="text">

export class App {
  name:string;
  is_edit: boolean; 
  constructor() {
    this.name = 'Angular2'
    this.is_edit = true;
  }
}

<input [disabled]="isDisabled()" id="name" type="text">

export class AppComponent {
  name:string;
  is_edit : boolean = false;


 isDisabled() : boolean{
   return this.is_edit;
 }
}




disabled-input