कोणीय 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

आपने पहले से ही यह प्रश्न पूछा था, और पहले से ही एक उत्तर था, लेकिन फिर प्रश्न को हटा दिया। फिर से, त्रुटियों को नोटिस करने के लिए अपना ब्राउज़र कंसोल खोलें, उन्हें ठीक करें (जैसे नाम का उपयोग करें और फॉर्म का नाम नहीं लिखें), और फिर, यह काम करता है: plnkr.co/edit/al2IkGkaZKpdLKKTfKh?p=preview

— JB Nizet

यहां वास्तविक समस्या यह है कि आप टेम्पलेट-आधारित रूपों को प्रतिक्रियाशील रूपों के साथ मिला रहे हैं। एक या दूसरे का उपयोग करें, दोनों का नहीं। @ AJT_82 का सही उत्तर है।

— adam0101

Answer 1

के attr.disabledबजाय का उपयोग करने का प्रयास करेंdisabled

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

Comments

Attr value को null में सेट करने के लिए, attr को एलिमेंट में नहीं जोड़ने के लिए - एक हैक की तरह दिखता है - लेकिन यह वास्तव में काम करता है, और यहां तक ​​कि एक दृष्टि में, sence भी बनाता है।

— c69

disabledके बराबर trueयाfalse

— Belter

जवाब के लिए धन्यवाद जो वास्तव में काम करता है! तो attr.disabledजब काम क्यों disabledनहीं करता है?

— देलनथेपीगुए

हालांकि यह काम करता है, यह एक हैक है जो टेम्पलेट-आधारित रूपों को प्रतिक्रियाशील रूपों के साथ मिश्रित करने की वास्तविक समस्या का समाधान नहीं करता है। ओपी को एक या दूसरे का उपयोग करना चाहिए, न कि दोनों का।

— adam0101

<input [attr.disabled] = "विकलांग || अशक्त" /> मैं काम भी लगता है

— फ्रांसेस्को

Answer 2

मुझे लगता है कि मैंने इस समस्या का पता लगा लिया है, यह इनपुट फ़ील्ड एक प्रतिक्रियाशील रूप (?) का हिस्सा है, क्योंकि आपने शामिल किया है formControlName। इसका मतलब है कि इनपुट क्षेत्र को अक्षम करके आप जो करने की कोशिश कर रहे हैं is_editवह काम नहीं कर रहा है, जैसे आपका प्रयास [disabled]="is_edit", जो अन्य मामलों में काम करेगा। अपने फॉर्म के साथ आपको कुछ ऐसा करने की आवश्यकता है:

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

जब यह काम करता है, तो यह सुझाव देता है कि "असत्य" नियंत्रण को सक्षम करेगा, जो कि अक्षम विशेषता की उपस्थिति के बाद से नहीं होता है जो नियंत्रण को अक्षम करता है, न कि मूल्य को।

— मक्कावेल्ली

@Mecaveli, [अक्षम] झूठे को स्थापित करना वास्तव में नियंत्रण को सक्षम बनाता है। <इनपुट [विकलांग] = "झूठी" आईडी = "नाम" प्रकार = "पाठ"> इनपुट क्षेत्र को सक्षम बनाता है। आप अपने कोणीय अनुप्रयोग पर जाँच कर सकते हैं।

— इफिसिनाची ब्रायन

बस अपने आप को यहाँ सही करने के लिए: जैसा कि मैंने सीखा, [अक्षम] वास्तव में "अक्षम" HTML विशेषता मान को नियंत्रित नहीं करता है जैसे [attr.disabled]। इसके बावजूद, [अक्षम] = "झूठे" काम करता है, हालांकि HTML विशेषता "अक्षम" के लिए "झूठे" मूल्य नहीं होगा।

— मेकवेल्ली

तो सभी में, आपको वास्तव में अपने संपादक का उपयोग करना चाहिए और काउंटर पॉइंट लाने से पहले इसे आज़माना चाहिए।

— इफिसिनाची ब्रायन

वास्तव में, दुर्भाग्य से इसे अब पूर्ववत नहीं करने के लिए खेद है। दुरुपयोग किया गया था सोच साल के लिए [attr.disabled] (या बल्कि बहुत ज्यादा नहीं सोच) है यह [विकलांग] ... के बराबर

— Mecaveli

Answer 4

यदि आप कुछ स्टेटमेंट पर डिसेबल करने के लिए इनपुट चाहते हैं। अक्षम के बजाय का उपयोग करें [readonly]=trueया false।

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

Comments

प्रतिक्रियाशील के अनुकूल समाधान।

— जॉन डियर

यह सही है। मेरे लिए [attr.disabled] = "विकलांग" ने एक तरफ़ा ही काम किया अर्थात इनपुट प्रारंभिक अक्षम / सक्षम स्थिति में रहा

— Spiritworld

इस के लिए बहुत बहुत धन्यवाद !

— नाजीर

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 विधि में रखते हैं, तो सैकड़ों कंसोल लॉग निष्पादित होते हैं। यदि isDisabled विधि में एक जटिल तर्क है, तो यह एक समस्या हो सकती है। इसलिए मुझे यकीन नहीं है कि यह एक अच्छा समाधान है।

— तेवा

कोणीय चर में डायनेमिक चेकिंग न करें या आपको एक अनंत लूप मिले। आप [disabled]="is_edit"सीधे उपयोग कर सकते हैं । isDisabled()समारोह क्यों ?

— एलेक्स 351

सीधे इनपुट स्थिति बदलने के लिए कोड अपडेट करें।

— योव श्नाइडरमैन

Answer 6

मुझे लगता है आप के falseबजाय मतलब है'false'

इसके अलावा, [disabled]एक उम्मीद है Boolean। आपको वापस लौटने से बचना चाहिए null।

Answer 7

ऊपर दिए गए फीडबैक के स्वीकार किए गए उत्तर पर बेल्टर की टिप्पणी के जवाब में एक टिप्पणी , क्योंकि मुझे टिप्पणियों को जोड़ने के लिए प्रतिष्ठा की कमी है।

यह किसी के लिए सच नहीं है, जिसमें से मैं मोज़िला डॉक्स के अनुरूप हूं

विकलांग सच या झूठ के बराबर होता है

जब अक्षम विशेषता मौजूद होती है तो तत्व मूल्य की परवाह किए बिना अक्षम होता है। इस उदाहरण को देखें

<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

मैं इस समाधान को पसंद करता हूं

HTML फ़ाइल में:

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

TS फ़ाइल में:

dynamicVariable = false; // true based on your condition 

Answer 9

आप जो देख रहे हैं वह अक्षम है = "सत्य" । यहाँ एक उदाहरण है:

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

Comments

यह गलत है, HTML और DOM disabledविशेषता एक "बूलियन विशेषता" है जिसका अर्थ है कि केवल विशेषता नाम को निर्दिष्ट करने की आवश्यकता है - या इसका मान बराबर होना चाहिए disabled, उदाहरण के लिए disabled="disabled" - it does not recognize the values of true 'या 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.component.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

यह अक्षम विशेषता को गतिशील रूप से सेट नहीं कर रहा है

— बेंजीनर