Angular 2 md-select don't bind selected value when populate from Observable array

Question

I have angular2 reactive form which contains md-select to make user select doctor from firebase md-select works fine when data exists before rendering the component but if data coming async as observable it doesn't show selected value

 doctors$:Observable< Doctor[] > = this.doctorService.findAllDoctors();
 

  constructor(private fb:FormBuilder , public doctorService : DoctorService 
  ,private cdr: ChangeDetectorRef )

  {    
   
 this.doctors$= this.doctorService.findAllDoctors();
  
this.form = this.fb.group({
      FullName: ['',Validators.required],
      Ext: [''],
      BirthDate: ['',Validators.required],
      Gender: ['',Validators.required],
      Phone: ['',[Validators.required]],
      doctorId: ['']

    });

<md-select formControlName="doctorId" ngControl="doctorId"  placeholder="Doctor"  >
      <md-option *ngFor="let p of doctors$ | async  " [value]="p.value">{{p.value}}</md-option>

    </md-select>

enter code here

You need to subscribe for the data. Update the doctor service code to your post. ** Note that your doctor variable is a Observable** — Aravind, Feb 05 '17 at 19:30
I have subscribed for data and it gets doctors list but unfortunately after creating formgroup so when doctor is binded to md-select it doesn't find options in it so it leave it blank , when I put options at constructor like var doctors= [{Name:"Ahmed"}, {Name:"Jack"}] it works ! , problem here is the data is coming lately after binding form group is there anyway to create formgroup after data subscription ? thanks in advance — Mohammed Salah, Feb 05 '17 at 23:47

score 0 · Accepted Answer · answered Feb 06 '17 at 01:50

0

Solved By Updating the md-select with selected value after loading options data asynchronously

 ngOnInit() {
   
this.doctors$.subscribe(c=>{

    this.form.controls['doctorId'].patchValue(this.initialValue.doctorId);


});

answered Feb 06 '17 at 01:50

Mohammed Salah

1
1

Angular 2 md-select don't bind selected value when populate from Observable array

1 Answers1