Angular4-प्रपत्र नियंत्रण के लिए कोई मूल्य अभिगमकर्ता नहीं




angular4-forms (2)

मेरे पास एक कस्टम तत्व है:

<div formControlName="surveyType">
  <div *ngFor="let type of surveyTypes"
       (click)="onSelectType(type)"
       [class.selected]="type === selectedType">
    <md-icon>{{ type.icon }}</md-icon>
    <span>{{ type.description }}</span>
  </div>
</div>

जब मैं formControlName जोड़ने का प्रयास करता हूं, तो मुझे एक त्रुटि संदेश मिलता है:

त्रुटि त्रुटि: नाम के साथ प्रपत्र नियंत्रण के लिए कोई मूल्य अभिगमकर्ता: 'सर्वेक्षण टाइप'

मैंने सफलता के बिना ngDefaultControl को जोड़ने की कोशिश की। ऐसा लगता है कि कोई इनपुट / चयन नहीं है ... और मुझे नहीं पता कि क्या करना है।

मैं इस फॉर्म में अपने क्लिक को इस रूप में बाँधना चाहूँगा कि जब कोई पूरे कार्ड पर क्लिक करे तो वह मेरे 'टाइप' को 'रूपक' में धकेल देगा। क्या यह संभव है?


आप केवल formControlName निर्देशों पर formControlName उपयोग कर सकते हैं जो ControlValueAccessor लागू ControlValueAccessor

इंटरफ़ेस लागू करें

इसलिए, आप जो चाहते हैं, उसे करने के लिए, आपको एक घटक बनाना होगा जो ControlValueAccessor लागू ControlValueAccessor , जिसका अर्थ है कि निम्नलिखित तीन कार्यों को लागू करना :

  • writeValue (बताता है कि कोणीय दृष्टि से मॉडल से मूल्य कैसे लिखा जाए)
  • registerOnChange (एक हैंडलर फ़ंक्शन को पंजीकृत करता है जिसे दृश्य बदलने पर कहा जाता है)
  • registerOnTouched (घटक को एक स्पर्श घटना प्राप्त होने पर बुलाया जाने वाला हैंडलर पंजीकृत करता है, यह जानने के लिए उपयोगी है कि घटक ध्यान केंद्रित किया गया है)

एक प्रदाता पंजीकृत करें

फिर, आपको कोणीय को बताना होगा कि यह निर्देश एक ControlValueAccessor (जब टाइपस्क्रिप्ट जावास्क्रिप्ट को जावास्क्रिप्ट के लिए संकलित किया जाता है तो कोड को छीन लिया जाता है (इंटरफ़ेस इसे काट नहीं सकता है)। आप एक प्रदाता को पंजीकृत करके ऐसा करते हैं।

प्रदाता को NG_VALUE_ACCESSOR प्रदान करना चाहिए और मौजूदा मूल्य का उपयोग करना चाहिए। आपको यहां एक forwardRef की भी आवश्यकता होगी। ध्यान दें कि NG_VALUE_ACCESSOR एक बहु प्रदाता होना चाहिए।

उदाहरण के लिए, यदि आपके कस्टम निर्देश का नाम MyControlComponent है, तो आपको @Component डेकोरेटर को @Component गए ऑब्जेक्ट के अंदर निम्नलिखित पंक्तियों के साथ कुछ जोड़ना चाहिए:

ERROR Error: No value accessor for form control with name: 'surveyType'

प्रयोग

आपका घटक उपयोग के लिए तैयार है। टेम्पलेट-चालित रूपों के साथ , ngModel बाइंडिंग अब ठीक से काम करेगी।

प्रतिक्रियाशील रूपों के साथ, अब आप formControlName ठीक से उपयोग कर सकते हैं और प्रपत्र नियंत्रण अपेक्षित व्यवहार करेगा।

साधन


मुझे लगता है कि आपको एक input पर formControlName="surveyType" उपयोग करना चाहिए न कि एक div






angular4-forms