अंक

Question

मान लीजिए मैं निम्नलिखित मॉडल संचालित रूप है:

this.addressForm = this.formBuilder.group({ 
    address: this.formBuilder.group({ 
    placeId: [this.address.placeId], 
    description: [this.address.description] 
    }) 
}); 

और निम्न टेम्पलेट:

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate> 
    <div class="form-group"> 
    <div class="input-group"> 
     <input type="text" 
     formControlName="address" 
     placeholder="Type in you address" 
     [ngbTypeahead]="chooseAddress" 
     [inputFormatter]="addressFormatter" 
     [resultFormatter]="addressFormatter" 
     autocomplete="off" 
     class="form-control"> 
    </div> 
    ... 
</form> 

addressFormatter:

addressFormatter = param => param.description;

कहेंदो गुणों वाला एक ऑब्जेक्ट है: placeId और description।

यह एक formGroup (यहाँ address) एक formControl के बजाय (यहाँ address.placeId) और अभी भी से निपटने के लिए पूर्व ऑब्जेक्ट के गुणों में से एक (जैसे address.description) के साथ प्रपत्र पॉप्युलेट असंभव लगता है।

मैं निम्नलिखित त्रुटि मिलती है:

Error in ./UserAccountAddressComponent class UserAccountAddressComponent - inline template:8:9 caused by: control.registerOnChange is not a function TypeError: control.registerOnChange is not a function

मैं क्षेत्र (address.description) में वस्तु में से एक संपत्ति प्रदर्शित करने के लिए सक्षम नहीं था और जब मैं प्रपत्र (address.placeId) जमा एक और एक का उपयोग किया जा रहा है, जबकि अभी भी ऑब्जेक्ट गुणों में से किसी एक के साथ फ़ॉर्म को पूर्ववत करने में सक्षम (यहां address.description)।

क्या कोई मदद कर सकता है?

Answer 1

मुद्दा जिस तरह से मैं अपने प्रतिक्रियाशील प्रपत्र निर्दिष्ट में था।

से बदल रहा है:

this.addressForm = this.formBuilder.group({ 
    address: this.formBuilder.group({ 
    placeId: [this.address.placeId], 
    description: [this.address.description] 
    }) 
}); 

... करने के लिए:

this.addressForm = this.formBuilder.group({ 
    address: this.formBuilder.control({//Notice the control() method instead of group() method 
    placeId: this.address.placeId, 
    description: this.address.description 
    }) 
}); 

... एक वस्तु प्रकार के बजाय पूरे इनपुट नियंत्रण के लिए एक स्ट्रिंग के प्रकार का उल्लेख करने के लिए मेरी अनुमति दी। https://angular.io/docs/ts/latest/api/forms/index/FormBuilder-class.html#!#control-anchor

संपादित: FormBuilder नियंत्रण() विधि यहाँ के लिए सरकारी कोणीय दस्तावेज़ देखें कृपया ध्यान दें कि इस एनजी bootsrap ढांचे के साथ कोई संबंध नहीं है।

Answer 2

मुझे लगता है कि आपकी त्रुटि का मतलब है कि आपके इनपुट के साथ बाध्य घटक ControlValueAccessor interface लागू नहीं करता है। अपने इनपुट में जोड़ने के लिए एक [formControl] बंधन का प्रयास करें:

<form [formGroup]="addressForm" (ngSubmit)="updateAddress()" novalidate> 
    <div class="form-group"> 
    <div class="input-group"> 
     <input type="text" 
     formControlName="address" 
     [formControl]="addressForm.address" 
     placeholder="Type in you address" 
     [ngbTypeahead]="chooseAddress" 
     [inputFormatter]="addressFormatter" 
     [resultFormatter]="addressFormatter" 
     autocomplete="off" 
     class="form-control"> 
    </div> 
    ... 
</form>