एक कोणीय 2 मॉडल-संचालित फॉर्म

Question

में चयन नियंत्रण का चयनित विकल्प सेट करना मैंने SO और अन्यत्र पर कई समान मौजूदा उत्तरों का शोध किया है, लेकिन इसका समाधान नहीं मिल रहा है।

मैं अपना फॉर्म बनाने के लिए कोणीय 2 में मॉडल संचालित दृष्टिकोण का उपयोग कर रहा हूं, जो कि एक जोड़ और संपादन फ़ॉर्म दोनों है। जब संपादन मोड में, मान किसी सेवा से पुनर्प्राप्त डेटा के साथ आबादी वाले होते हैं: यह पहलू ठीक है क्योंकि सरल पाठ इनपुट सभी सही ढंग से बाध्य होते हैं।

प्रॉपर्टीज़ में से एक 'देश' है और यह एक वस्तु इस प्रकार है:

export class Country {id: number; name: string;} 

मैं एक का चयन नियंत्रण जो उपलब्ध देशों की सूची में होगा करने के लिए इस बाध्य करने के लिए चाहते हैं, और से एक जब फॉर्म लोड होता है तो मॉडल पॉप्युलेट होता है। मैं बाध्यकारी का मूल्य देश वस्तु होना चाहता हूं, सिर्फ आईडी नहीं।

यहाँ चुनिंदा नियंत्रण के HTML है:

<select class="form-control" id="country" formControlName="country"> 
      <option value="default">--Select a country--</option> 
      <option *ngFor="let c of countries" [value]="c">{{c.name}}  </option> 
</select> 

और यहाँ वह जगह है जहाँ मैं घटक वर्ग से मान को करने की कोशिश:

(<FormControl>this.personForm.controls['country']) 
.setValue(this.person.country, { onlySelf: true }); 

लेकिन वहाँ कोई चयनित विकल्प है जब पेज लोड, भले ही कंसोल पुष्टि करता है कि यह.person.country मौजूद है और सही ऑब्जेक्ट के साथ पॉप्युलेट है।

मैं इसे आईडी के साथ काम कर सकता हूं: दृश्य में [value] = "c.id" में बदलना और कक्षा में जोड़ना। और फिर यह काम करता है कि सही विकल्प चुना गया है। समस्या यह है कि चयन अब देश की संपत्ति के लिए एक वस्तु को छोड़ देता है, बस आईडी। मैंने [value] को [ngValue] में बदलने की कोशिश की और एक ही परिणाम प्राप्त किया। मैंने चयनित तत्व में [ngModel] = "देश" भी जोड़ा और इससे कोई मदद नहीं मिली।

मैं किसी भी मदद के लिए आभारी रहूंगा।

Answer 1

समस्या यह है कि this.person.country आपके countries सरणी के समान country समान नहीं है।

हम उन्हें एक ही हम या तो स्पष्ट चयन नियंत्रण से valueChanges की सदस्यता या बाध्य कर सकते हैं [(ngModel)]person.country को बनाना चाहते हैं:

परिवर्तन

कोड

this.countryForm.controls['country'].valueChanges.subscribe(country => 
    this.person.country = country; 
); 

// initialize by finding the correct country object (this will overwrite the person's country object) 
this.countryForm.controls['country'].setValue(countries.filter(c => c.id === person.country.id)); 

की सदस्यता

टेम्पलेट

ngModel बाँध

हम अभी भी वस्तुओं मैच

कोड

this.person.country = this.countries.filter(c => c.id === this.person.country.id)[0]; 

टेम्पलेट (रणनीति है कि कोणीय 2 का उपयोग करता है जो वास्तव में क्या जे एस का उपयोग करता है की तुलना में) करना है

<select class="form-control" id="country" formControlName="country" [(ngModel)]="person.country"> 
    <option value="default">--Select a country--</option> 
    <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option> 
</select> 

ngModel Plunker:http://plnkr.co/edit/UIS2V5rKh77n4JsjZtii?p=preview

सदस्यता Plunker: http://plnkr.co/edit/yyZ6ol1NPD77nyuzwS2t?p=info