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]*')]]
});
}
Has anyone had this issue with asynchronous data and the Select form control?
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.