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

Question

में ड्रॉप डाउन सूची में मेरे पास एक मॉडल संचालित फॉर्म है जिसमें मैं कई विकल्पों वाले ड्रॉप डाउन सूची को जोड़ना चाहता हूं। विकल्प पूर्व-प्राप्त सूची से हैं, और फ़ॉर्म का मॉडल घटक को इंजेक्शन दिया जाता है। फ़ॉर्म सही ढंग से लोड किया गया है: मॉडल के सभी फ़ील्ड ठीक से भरे हुए हैं, ड्रॉप-डाउन सूची के विकल्पों की सूची को भी सही ढंग से लोड किया गया है।
एकमात्र समस्या यह है कि मैं सूची के selected मान सेट नहीं कर सकता, और यह पहले खाली मूल्य के साथ दिखाई देता है।

यहां, मैं एचएमओ सूची लोड कर रहा हूं, फिर रोगी को लोड कर रहा हूं, और केवल तब फॉर्म बना रहा हूं।
फॉर्म के सभी मान (नाम, आईडी, आदि जो यहां छोड़े गए हैं) फॉर्म में सही ढंग से लोड किए गए हैं।
फॉर्म में ड्रॉप-डाउन सूची सही ढंग से भर दी गई है: सभी एचएमओ सूची पॉप्युलेट कर रहे हैं।
फिर भी, सूची में चयनित मान गुम है, और खोया कोई प्रारंभिक मूल्य के साथ लोड किया गया है।
डिबगिंग उद्देश्यों के लिए, मैंने option टैग में 0-में बूलियन स्थिति को प्रतिस्थापित किया है: isSelected(hmo)।
यह फ़ंक्शन अनिवार्य रूप से समान तुलना करता है और इसका मान देता है, लेकिन पहले इसे लॉग करता है। वास्तव में मुझे लगता है कि सही एचएमओ के साथ विकल्प true मान प्राप्त करता है और अन्य सभी विकल्पों को false मान प्राप्त होते हैं, जिसका अर्थ है कि सभी डेटा सही तरीके से लोड हो गए हैं।

इसके अलावा, जब मैं [selected]="true" (हमेशा सत्य होने के लिए) सेट करता हूं, तो मुझे लगता है कि परिवर्तन प्रभावित होता है: अंतिम विकल्प चुना गया है (HTML में डिफ़ॉल्ट)।

तो मैं कहां गलत हूं? मुझे चयनित विकल्प को सही तरीके से कैसे सेट करना चाहिए?

घटक के लिए कोड (HMO छोड़कर सभी क्षेत्रों छोड़े गए हैं):

<div class="row" *ngIf="showForm"> 
    <div class="col-xs-12" *ngIf="showForm"> 
    <form [formGroup]="patientForm" (ngSubmit)="onSubmit()"> 
     <div class="form-group"> 
     <label for="hmo">HMO</label> 
     <select formControlName="hmo" id="hmo"> 
      <option *ngFor="let hmo of hmos" 
        [value]="hmo.uid" [selected]="patient.hmo.uid == hmo.uid"> 
      {{hmo.name}} 
      </option> 
     </select> 
    </form> 
    </div> 
</div> 

Patient के लिए कोड::

import {Hmo} from "../hmos/hmo"; 
export class Patient { 
    constructor(public hmo: Hmo) { 

    } 
} 

कोड

import {Component, Input, Inject, OnInit} from "@angular/core"; 
import { 
    FormGroup, 
    FormControl, 
    REACTIVE_FORM_DIRECTIVES, 
    Validators, 
    FormBuilder, 
    FormArray 
} from "@angular/forms"; 
import {Patient} from "./patient"; 
import {PatientsService} from "./patients.service"; 
import {Hmo} from "../hmos/hmo"; 
import {HmosService} from "../hmos/hmos.service"; 
import {Doctor} from "../doctors/doctor"; 
import {DoctorsService} from "../doctors/doctors.service"; 
import {Router, ActivatedRoute} from "@angular/router"; 
import {Subscription} from "rxjs/Rx"; 
import {Response} from "@angular/http"; 
import {JavaDate} from "./java-date"; 

@Component({ 
    moduleId: module.id, 
    selector: 'gy-patient-edit', 
    templateUrl: 'patient-edit.component.html', 
    directives: [REACTIVE_FORM_DIRECTIVES], 
}) 
export class PatientEditComponent implements OnInit { 

    patientForm: FormGroup; 

    @Input() patient: Patient; 
    private hmos: Hmo[]; 
    private patientUid: number; 
    private showForm: boolean = false; 

    constructor(@Inject(PatientsService) private patientsService: PatientsService, 
       @Inject(HmosService) private hmosService: HmosService, 
       @Inject(ActivatedRoute) private route: ActivatedRoute, 
       @Inject(FormBuilder) private formBuilder: FormBuilder) { 
    } 

    ngOnInit(): any { 
    this.subscription = this.route.params.subscribe(
     (params: any) => { 
     this.patientUid = params['id']; //Getting the UID from the URL 
     } 
    ); 
    this.hmosService.hmosChanged.subscribe(
     (hmos: Hmo[]) => { 
     this.hmos = hmos; //Fetching available HMOs 
     } 
    ); 
    this.hmosService.fetchHmos(); 
    this.patientsService.fetchPatient(this.patientUid) //Fetching the Patient 
     .map((response: Response) => response.json()) 
     .subscribe((data: Patient) => { 
     this.patient = data; 
     this.restartForm(); //Only required so the form will ne initialized only after the patient is received from the server 
     }); 
    } 

    restartForm(){ 
    this.patientForm = this.formBuilder.group({ 
     hmo: [this.patient.hmo]] 
    }); 
    this.showForm = true; 
    } 

    ngOnDestroy() { 
    this.subscription.unsubscribe(); 
    } 

} 

HTML प्रपत्र के लिए कोड Hmo के लिए:

export class Hmo{ 
    constructor(public uid: number, public name: string){} 
} 

Answer 1

चयनित विकल्प मूल्य '<select> साथ रों मूल्य' <option> की तुलना द्वारा गणना की जाती है। इसके प्रकाश में, <option> को चयनित के रूप में चिह्नित करने के लिए, हमें यह सुनिश्चित करना होगा कि रैपिंग <select> में वही मान हो, जिसके बदले में आपके मॉडल में संबंधित फ़ॉर्म नियंत्रण के सही मूल्य की आवश्यकता हो।

आपका कोड थोड़ा पालन संशोधित किया जा सकता:

restartForm(){ 
    this.patientForm = this.formBuilder.group({ 
     hmo: [this.patient.hmo.uid] 
    }); 
    this.showForm = true; 
    } 

और टेम्पलेट:

<select formControlName="hmo" id="hmo"> 
    <option *ngFor="let hmo of hmos" 
    [value]="hmo.uid"> 
     {{hmo.name}} 
    </option> 
</select>