2016-11-08 26 views
20

मैं विशेषता formControl से उपयोग करने का प्रयास कर रहा हूं। जब मैंने इसे टेम्पलेट में डाल दिया, यह काम करता है:प्रतिक्रियाशील रूप - अक्षम विशेषता

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input> 

लेकिन ब्राउज़र मुझे अलर्ट:

ऐसा लगता है कि आप एक प्रतिक्रियाशील रूप निर्देश के साथ विकलांग विशेषता का उपयोग कर रहे हैं। यदि आप अपने घटक वर्ग में यह नियंत्रण सेट करते समय सही पर अक्षम सेट करते हैं, तो अक्षम विशेषता वास्तव में के लिए DOM में सेट की जाएगी। हम 'चेक के बाद बदला' त्रुटियों से बचने के लिए इस दृष्टिकोण का उपयोग करने की सलाह देते हैं।

constructor(private itemsService: ItemsService) { 
    this._items = []; 
    this.myForm = new FormGroup({ 
     id: new FormControl({value: '', disabled: true}, Validators.required), 
     title: new FormControl(), 
     description: new FormControl() 
    }); 
    this.id = this.myForm.controls['id']; 
    this.title = this.myForm.controls['title']; 
    this.description = this.myForm.controls['description']; 
    this.id.patchValue(this._items.length); 
} 

लेकिन यह काम नहीं करता है (यह इनपुट अक्षम करने नहीं है):

Example: 
    form = new FormGroup({ 
    first: new FormControl({value: 'Nancy', disabled: true}, Validators.required), 
    last: new FormControl('Drew', Validators.required) 
    }); 

तो मैं यह FormControl में डाल दिया, और टेम्पलेट से हटा दिया। समस्या क्या है?

+1

यह कोणीय 2 के वर्तमान संस्करण के साथ ठीक से काम करने लगता है: http://plnkr.co/edit/CQQtkYC9D5EoH0sAlNCV ? पी = पूर्वावलोकन – silentsod

+0

मैं – FacundoGFlores

+2

का परीक्षण करने के लिए सबसे आखिरी कोणीय क्ली प्रोजेक्ट का उपयोग कर रहा हूं, आप @ कोणीय/सामग्री का उपयोग कर रहे हैं, इसलिए, उनके जीथब मुद्दों के अनुसार: https://github.com/angular/material2/issues/1171 यह है अभी तक समर्थित नहीं है और वे अल्फा में हैं ताकि आप इसे पूर्ण होने की उम्मीद नहीं कर सकें। – silentsod

उत्तर

10

मैं [attr.disabled] उपयोग किया गया है से संबंधित GitHub में तैनात माध्यम से जाना होना क्योंकि मुझे अभी भी प्रोग्रामेटिक सक्षम()/अक्षम() से अधिक इस टेम्पलेट को पसंद है क्योंकि यह बेहतर आईएमओ है।

बदलें

<md-input formControlName="id" placeholder="ID" [disabled]="true"></md-input>

<md-input formControlName="id" placeholder="ID" [attr.disabled]="true"></md-input>

आप mat-input के लिए नए व्यापक बदलाव MD-इनपुट पर हैं करने के लिए।

+0

यह काम करता है, धन्यवाद! लेकिन मुझे समझ में नहीं आता कि मुझे "attr.disabled" का उपयोग क्यों करना चाहिए (न केवल "अक्षम")? –

+0

यह कोणीय घटकों के लिए टेलीरिक केंडो के लिए भी काम करता है। उनमें से कुछ में '[अक्षम] 'संपत्ति है और इसका उपयोग करते समय मुझे एक ही संकलन चेतावनी मिली। मैंने '[अक्षम]' '' attr.disabled] को बदल दिया है और यह घटक '। अक्षम' संपत्ति में प्रचारित हो जाता है। –

+1

बस ध्यान दें, [attr.disabled] के साथ आप इसे दो तरीकों से बांधने का उपयोग नहीं कर सकते हैं। यह केवल एक बार काम करता है। '[अक्षम] 'के साथ और कंसोल में चेतावनी काम कर रही है। मैं कोणीय 4.1.3 का उपयोग कर रहा हूँ –

0

अपने एमडी-इनपुट में नाम विशेषता जोड़ें। यदि यह समस्या का समाधान नहीं करता है, तो कृपया अपना टेम्पलेट

5

इस समस्या को हल करने के लिए आप इस तरह प्रयास कर सकते हैं।

अक्षम

this.myForm.controls['id'].disable(); 

के लिए

this.myForm.controls['id'].enable(); 

सक्षम के लिए और अधिक जानकारी के लिए इस मुद्दे को इस https://github.com/angular/angular/issues/11271#issuecomment-244507976

0

उपयोग [attr.disabled] के बजाय [विकलांग], मेरे मामले में यह ठीक काम करता है

संबंधित मुद्दे