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

Question

TS ইন 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"

Comments

আপনি ইতিমধ্যে এই প্রশ্নটি জিজ্ঞাসা করেছেন, এবং ইতিমধ্যে একটি উত্তর ছিল, তবে তারপরে প্রশ্নটি মুছে ফেলা হয়েছে। আবার, ত্রুটিগুলি লক্ষ্য করার জন্য আপনার ব্রাউজার কনসোলটি খুলুন, সেগুলি ঠিক করুন (যেমন নামটি ব্যবহার করুন এবং formControlName নয়) এবং তারপরে এটি কাজ করে: plnkr.co/edit/al2IkGkaZKpdLKKffKh?p= পূর্বরূপ

— জেবি নিজেট

এখানে আসল সমস্যাটি হ'ল আপনি প্রতিক্রিয়াশীল ফর্মগুলির সাথে টেম্পলেট-ভিত্তিক ফর্মগুলি মিশ্রণ করছেন। একটি বা অন্য ব্যবহার করুন, উভয়ই নয়। @ AJT_82 এর সঠিক উত্তর রয়েছে।

— adam0101

Answer 1

attr.disabledপরিবর্তে, ব্যবহার করার চেষ্টা করুনdisabled

<input [attr.disabled]="disabled ? '' : null"/>

Comments

উপাদানটির সাথে অ্যাটর যুক্ত করতে না পারার জন্য অ্যাটর মান নির্ধারণ করা - হ্যাকের মতো দেখাচ্ছে - তবে এটি আসলে কাজ করে, এমনকি একটি দুরন্ত দৃষ্টিতে দৃষ্টিও তৈরি করে।

— c69

disabledএর সমান trueবাfalse

— বেলটার

আসলে যে কাজ করে এমন একটি উত্তরের জন্য আপনাকে ধন্যবাদ! তাহলে কেন attr.disabledকাজ disabledহয় না যখন ?

— ডায়লান্থেপিগুয়ে

এটি কাজ করার সময়, এটি হ্যাক যা প্রতিক্রিয়াশীল ফর্মগুলির সাথে টেমপ্লেট-ভিত্তিক ফর্মগুলি মিশ্রিত করার আসল সমস্যাটির সমাধান করে না। ওপিতে একটি বা অন্য দুটি ব্যবহার করা উচিত, উভয়ই নয়।

— adam0101

<ইনপুট [অ্যাটর্সিডিজড] = "অক্ষম || নাল" /> আমার মনে হয় কাজটিও

— ফ্রান্সেস্কো

Answer 2

আমি মনে করি যে আমি সমস্যাটি বুঝতে পেরেছি, আপনি অন্তর্ভুক্ত করার কারণে এই ইনপুট ক্ষেত্রটি একটি প্রতিক্রিয়াশীল ফর্ম (?) এর একটি অংশ formControlName। এর অর্থ এই যে আপনি ইনপুট ক্ষেত্রটি অক্ষম করে যা করার চেষ্টা করছেন is_editতা কাজ করছে না, যেমন আপনার প্রচেষ্টা [disabled]="is_edit", যা অন্য ক্ষেত্রে কাজ করবে work আপনার ফর্মের সাথে আপনার এ জাতীয় কিছু করা দরকার:

toggle() {
  let control = this.myForm.get('name')
  control.disabled ? control.enable() : control.disable();
}

এবং is_editপুরোপুরি হারাতে ।

আপনি যদি ইনপুট ক্ষেত্রটি ডিফল্ট হিসাবে অক্ষম করতে চান তবে আপনাকে ফর্ম নিয়ন্ত্রণটি সেট করতে হবে:

name: [{value: '', disabled:true}]

এখানে একটি নিমজ্জনকারী

Answer 3

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

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

Comments

এটি কাজ করার সময়, এটি প্রস্তাব দেয় যে "মিথ্যা" নিয়ন্ত্রণটি সক্ষম করে, যা অক্ষম বৈশিষ্ট্যের উপস্থিতি নিয়ন্ত্রণকে অক্ষম করে, মানটি নয়।

— মেকাভেলি

@ মেকাভেলি, [অক্ষম] কে মিথ্যে সেট করা আসলে নিয়ন্ত্রণ সক্ষম করে। <ইনপুট [অক্ষম] = "মিথ্যা" আইডি = "নাম" প্রকার = "পাঠ্য"> ইনপুট ক্ষেত্রটিকে সক্ষম করে তোলে। আপনি আপনার কৌণিক প্রয়োগ পরীক্ষা করতে পারেন।

— ইফেসিনাচি ব্রায়ান

কেবল এখানে নিজেকে সংশোধন করার জন্য: আমি যেমন শিখেছি, [অক্ষম] আসলে "অক্ষম" এইচটিএমএল বৈশিষ্ট্যটির মান [অ্যাট্রিজিড] সক্ষম করে না। এর জন্য, [অক্ষম] = "মিথ্যা" কাজ করে যদিও "মিথ্যা" এইচটিএমএল বৈশিষ্ট্য "অক্ষম" না করে মান হিসাবে দেয় as

— মেকাভেলি

সুতরাং সর্বোপরি, আপনার প্রকৃতপক্ষে আপনার সম্পাদককে ব্যবহার করা উচিত এবং কাউন্টার পয়েন্টটি আনার আগে এটি ব্যবহার করে দেখার চেষ্টা করা উচিত।

— ইফেসিনাচি ব্রায়ান

দুর্ভাগ্যক্রমে দুর্ভাগ্যবশত এটিকে পূর্বাবস্থায় ফিরিয়ে আনতে পারি না বলে ক্ষমা করুন। বছরের পর বছর ধরে (অ্যাট্রিজেড) অপব্যবহার করে যাচ্ছিল (বা বেশি চিন্তা না করা) এটি [প্রতিবন্ধীদের] সমান ...

— মেকাভেলি

Answer 4

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

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

Comments

প্রতিক্রিয়াশীল-বান্ধব সমাধান।

— জন হরিণ

এটা সঠিক। আমার জন্য [অ্যাটর্সিডিজড] = "অক্ষম" কেবল একপেশে কাজ করেছে অর্থাৎ ইনপুট প্রাথমিক অক্ষম / সক্ষম অবস্থায় থাকবে

— স্পিরিওয়ার্ল্ড

এই জন্য আপনাকে অনেক ধন্যবাদ !

— নাজির

Nazirকোনও সমস্যা নেই

— উসমান সালেহ

Answer 5

<input [disabled]="is_edit" id="name" type="text">
<button (click)="is_edit = !is_edit">Change input state</button>

export class AppComponent {
  is_edit : boolean = false;
}

Comments

যদি আপনি isdisabled পদ্ধতিতে কনসোল লগ রাখেন তবে শত শত কনসোল লগ কার্যকর করা হয়। যদি আইডিজড পদ্ধতিতে একটি জটিল যুক্তি থাকে তবে এটি সমস্যা হতে পারে। সুতরাং আমি নিশ্চিত নই যে এটি একটি ভাল সমাধান।

— Téwa

কৌণিক পরিবর্তনশীলগুলিতে গতিশীল চেকিং রাখবেন না বা আপনি একটি অসীম লুপ পাবেন। আপনি [disabled]="is_edit"সরাসরি ব্যবহার করতে পারেন । কেন isDisabled()অনুষ্ঠান?

— alex351

ইনপুট স্থিতি সরাসরি পরিবর্তন করতে কোড আপডেট করুন।

— যোয়াভ স্নাইডারম্যান

Answer 6

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

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

Answer 7

উপরে ফেডটকের গৃহীত উত্তর সম্পর্কে বেল্টারের মন্তব্যের জবাবে একটি নোট , যেহেতু মন্তব্য যুক্ত করার খ্যাতি আমার নেই 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"/>

Comments

এটি খাঁটি এইচটিএমএল-এর জন্য সত্য এবং সম্পূর্ণ সত্য, তবে কৌণিকের জন্য, আপনাকে অক্ষমদের জন্য একটি বুলিয়ান মান প্রদান করতে হবে, বিশেষত যখন আপনি দ্বি-উপায় বাঁধাই করছেন।

— ইফেসিনাচি ব্রায়ান

Answer 8

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

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

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

টিএস ফাইলে:

dynamicVariable = false; // true based on your condition 

Answer 9

আপনি যা খুঁজছেন তা অক্ষম = "সত্য" । এখানে একটি উদাহরণ:

<textarea class="customPayload" disabled="true" *ngIf="!showSpinner"></textarea>

Comments

এটি ভুল, এইচটিএমএল এবং ডিওএম disabledবৈশিষ্ট্যটি একটি "বুলিয়ান অ্যাট্রিবিউট" যার অর্থ কেবলমাত্র বিশিষ্ট নামটি নির্দিষ্ট করা দরকার - বা এর মান সমান হওয়া উচিত disabled, যেমন সত্য disabled="disabled" - it does not recognize the values of `বা false- disabled="false"এরপরেও উপাদানটি অক্ষম করে দেবে।

— দাই

Answer 10

ডেমো

করতে 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;
  }
}

Answer 11

---

কৌণিক 7 এ পাঠ্যবক্স অক্ষম করুন

<div class="center-content tp-spce-hdr">
  <div class="container">
    <div class="row mx-0 mt-4">
      <div class="col-12" style="padding-right: 700px;" >
          <div class="form-group">
              <label>Email</label>
                <input [disabled]="true" type="text" id="email" name="email" 
                [(ngModel)]="email" class="form-control">
          </div>
     </div>
   </div>
 </div>

Answer 12

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

Answer 13

Selectকৌণিক 9 এ অক্ষম ।

booleanএই উদাহরণে মানগুলির সাথে একটি জিনিস অক্ষমকৃত কাজ মনে রাখবেন , আমি বিকল্পটি (change)ইভেন্ট সহ ইভেন্টটি ব্যবহার করছি selectযদি দেশটি নির্বাচিত না করা অঞ্চলটি অক্ষম হয়ে যায়।

find.componal.ts ফাইল

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-find',
  templateUrl: './find.component.html',
  styleUrls: ['./find.component.css']
})
export class FindComponent implements OnInit {
  isCountrySelected:boolean;

  constructor() { }
  //onchange event disabled false
 onChangeCountry(id:number){
   this.isCountrySelected = false;
 }
  ngOnInit(): void {
    //initially disabled true
    this.isCountrySelected = true;
  }

}

find.component.html

//Country select option
<select  class="form-control"  (change)="onChangeCountry()" value="Choose Country">
                    <option value="">Choose a Country</option>
                    <option value="US">United States</option>
                     
</select>
//region disabled till country is not selected 
<select class="form-control" [disabled]="isCountrySelected">
                    <option value="">Choose a Region</option>
                    <option value="">Any regions.</option>
                    
                </select>

Answer 14

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

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

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

Comments

এটি গতিশীলভাবে অক্ষম বৈশিষ্ট্য নির্ধারণ করছে না

— বেনজিনার