2017-06-24 43 views
15

में कस्टम फॉर्म घटक से फॉर्मकंट्रोल तक पहुंच प्राप्त करें मेरे पास मेरे कोणीय अनुप्रयोग में कस्टम प्रपत्र नियंत्रण घटक है, जो ControlValueAccessor इंटरफ़ेस लागू करता है।कोणीय

हालांकि, मैं अपने घटक से जुड़े FormControl उदाहरण तक पहुंच बनाना चाहता हूं। मैं FormBuilder के साथ प्रतिक्रियाशील रूपों का उपयोग कर रहा हूं और formControlName विशेषता का उपयोग कर फ़ॉर्म नियंत्रण प्रदान कर रहा हूं।

SO, मैं अपने कस्टम फॉर्म घटक के अंदर से FormControl उदाहरण कैसे प्राप्त करूं?

उत्तर

14

यह समाधान कोणीय भंडार में the discussion से पैदा हुआ था। कृपया, अगर आप इस समस्या में रूचि रखते हैं तो भाग लेने के लिए इसे पढ़ना या बेहतर प्रदर्शन करना सुनिश्चित करें।


मैं FormControlName निर्देश का कोड का अध्ययन किया है और यह मुझे निम्न समाधान लिखने के लिए प्रेरित कर रहा है:

@Component({ 
    selector: 'my-custom-form-component', 
    templateUrl: './custom-form-component.html', 
    providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: CustomFormComponent, 
    multi: true 
    }] 
}) 
export class CustomFormComponent implements ControlValueAccessor, OnInit { 

    @Input() formControlName: string; 

    private control: AbstractControl; 


    constructor (
    @Optional() @Host() @SkipSelf() 
    private controlContainer: ControlContainer 
) { 
    } 


    ngOnInit() { 

    if (this.controlContainer) { 
     if (this.formControlName) { 
     this.control = this.controlContainer.control.get(this.formControlName); 
     } else { 
     console.warn('Missing FormControlName directive from host element of the component'); 
     } 
    } else { 
     console.warn('Can\'t find parent FormGroup directive'); 
    } 

    } 

} 

मैं घटक के लिए माता-पिता FormGroup इंजेक्शन लगाने कर रहा हूँ और फिर विशिष्ट FormControl से हो रही यह formControlName बाइंडिंग के माध्यम से प्राप्त नियंत्रण नाम का उपयोग कर रहा है।

हालांकि, सलाह दी जानी चाहिए कि यह समाधान विशेष रूप से उपयोग के मामले के लिए तैयार किया गया है जहां FormControlName निर्देश तत्व होस्ट तत्व पर उपयोग किया जाता है। यह अन्य मामलों में काम नहीं करेगा। इसके लिए आपको कुछ अतिरिक्त तर्क जोड़ने की आवश्यकता होगी। यदि आपको लगता है कि यह कोणीय द्वारा संबोधित किया जाना चाहिए, तो the discussion पर जाना सुनिश्चित करें।

+0

आपके पास कहां है 'यह.control'? – DAG

+0

@DAG जैसा कि मैंने उत्तर में बताया था: 'मैं घटक के लिए मूल फॉर्म समूह को इंजेक्ट कर रहा हूं और उसके बाद फॉर्मकंट्रोलनाम बाइंडिंग के माध्यम से प्राप्त नियंत्रण नाम का उपयोग करके विशिष्ट फॉर्म नियंत्रण प्राप्त कर रहा हूं। –

+2

@SlavaFominII: पैरेंट फॉर्म समूह इंजेक्शन करने के बजाय और फिर FormControllerName इनपुट बाध्यकारी का उपयोग कर नियंत्रण तक पहुंच, क्या हम इनपुट बाध्यकारी के रूप में फॉर्म नियंत्रण को पास नहीं कर सकते? मुझे एक समान आवश्यकता थी जहां मैं कस्टम फॉर्म घटक से फॉर्म नियंत्रण तक पहुंचना चाहता था और मैंने उस फॉर्म नियंत्रण को कस्टम फॉर्म घटक के लिए बाध्यकारी इनपुट के रूप में पास कर दिया। – Ritesh

2

@Ritesh जैसा कि पहले ही टिप्पणी में लिखा है आप बाध्यकारी एक इनपुट के रूप प्रपत्र नियंत्रण पारित कर सकते हैं:

<my-custom-form-component [control]="myForm.get('myField')" formControlName="myField"> 
</my-custom-form-component> 

और फिर आप इस तरह अपने कस्टम प्रपत्र घटक के अंदर प्रपत्र नियंत्रण उदाहरण प्राप्त कर सकते हैं:

@Input() control: FormControl;