angularangular-material2angular4-forms

Material 2 Form Control Select Not working with Async Source


I am running Angular 4.3.4 with Material 2.0.0-beta.12 and I am having issues when trying to create a mat-select to generate a dynamic mat-option list from an asynchronous source. All I get is the placeholder and the dropdown doesn't expand. I don't even receive and error code.

Here is a sample of my code UPDATED:

 <form [formGroup]="snoozeForm" novalidate>
  <div fxLayout="column">
    <mat-form-field>
      <mat-select formControlName="snooze_reason">
        <mat-option [value]="reason.attributes.snooze_reason_code" *ngFor="let reason of reasons">{{ reason }}</mat-option>
      </mat-select>
    </mat-form-field>
</form>

As you can see reasons is the array that gets dynamically populated. I must be overlooking something simple, but I am sure reasons is getting populated.

Here is where I populate the array:

ngOnInit() {
  this.generateForm();
  this.httpService.getSnoozeReasons()
    .subscribe( res => {
      this.reasons = res;
    }, (error: any) => {
      const msg: Message = { title: 'Frontend API Error', textbody1: '' };
      if (error.message) {
        msg.textbody1 = <any>error.message;
        msg.textbody2 = `Task-details component - Snooze reasons`;
      } else {
        msg.textbody1 = `HTTP ${error.status}: ${error.statusText}`;
        msg.textbody2 = `Task-details - Snooze reasons: ${error.url}`;
      }
      this.messageService.createMessage(msg);
    })
  ;
}

generateForm(): void {
  this.snoozeForm = this.fb.group({
    snooze_reason: ['', [Validators.required]],
    snooze_hour: ['', [Validators.pattern('[0-9]*'), Validators.max(72)]],
    snooze_minute: ['', [Validators.required, Validators.min(5), Validators.pattern('[0-9]*')]]
  });
}

enter image description here

Has anyone had this issue with asynchronous data and the Select form control?


Solution

  • Thanks @Guillodacosta!

    I had another pair of eyes to validate that the code was correct. I believe my issue now is that I have conflict with my UI packages. Ng-Bootstrap maybe causing my Material 2 Select to not render properly.

    Over the past weekend I took some time to replicate my scenario, and validated that the code I have should work with the asynchronous data populating the Material 2 Select Drop-down.