कोणीय 4 - फॉर्म नियंत्रण के लिए कोई मूल्य एक्सेसर

Question

मेरे पास मेरे फॉर्म के साथ एक छोटी सी जांच है।

<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 जोड़ने का प्रयास करते हैं, लेकिन कोणीय न कुछ भी जानना चाहता हूँ और बस कह रही::

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

मैं सफलता के बिना ngDefaultControl जोड़ने की कोशिश की

मैं एक कस्टम तत्व था। ऐसा लगता है क्योंकि कोई इनपुट/चयन नहीं है ... लेकिन मुझे नहीं पता कि क्या करना है।

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

Answer 1

पर नहीं एक input पर formControlName="surveyType" का उपयोग करना चाहिए आप केवल ऐसे निर्देश हैं जो ControlValueAccessor लागू पर formControlName उपयोग कर सकते हैं।

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

तो, आदेश तुम क्या चाहते करने के लिए, आप एक घटक है जो ControlValueAccessor लागू करता है, जो निम्नलिखित तीन कार्यों को लागू करने का मतलब है बनाने के लिए:

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

फिर एक प्रदाता

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

प्रदाता NG_VALUE_ACCESSOR और use an existing value प्रदान करना चाहिए। आपको यहां forwardRef की भी आवश्यकता होगी। ध्यान दें कि NG_VALUE_ACCESSORmulti provider होना चाहिए।

providers: [ 
    { 
    provide: NG_VALUE_ACCESSOR, 
    multi: true, 
    useExisting: forwardRef(() => MyControlComponent), 
    } 
] 

प्रयोग

आपका घटक तैयार है इस्तेमाल किया जा रहा:

उदाहरण के लिए, यदि अपने कस्टम निर्देश MyControlComponent नाम पर है, आप कुछ निम्नलिखित लाइनों के साथ वस्तु @Component डेकोरेटर के लिए पारित अंदर जोड़ना चाहिए । template-driven forms के साथ, ngModel बाध्यकारी अब ठीक से काम करेगा।

reactive forms के साथ, अब आप formControlName का उचित उपयोग कर सकते हैं और फॉर्म नियंत्रण अपेक्षित व्यवहार करेगा।

संसाधन

• Custom Form Controls in Angular by Thoughtram
• Angular Custom Form Controls with Reactive Forms and NgMode by Cory Rylan

Answer 2

मुझे लगता है कि आप और एक div