angular-material-components
angular-material-components copied to clipboard
Getting ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
Using angular version 12.1.1 and
"@angular-material-components/datetime-picker": "^6.0.3",
"@angular-material-components/moment-adapter": "^6.0.0",
I get the above error when adding a datetime-picker element. I get ERROR TypeError: this.datepicker.open is not a function when attempting to click the picker button. Unlike the issue here: https://github.com/h2qutc/angular-material-components/issues/204 I still get the error when using compatible angular and package version.
Here is the html code I am using to create the datetime picker:
<mat-form-field appearance="fill">
<mat-label for="raceDatetime">Reference Datetime</mat-label>
<input
id="raceDatetime"
matInput
[ngxMatDatetimePicker]="raceDatetimePicker"
[formControl]="raceStartDateTimeControl"
>
<mat-datepicker-toggle
matSuffix
[for]="raceDatetimePicker"
disabled = "false">
</mat-datepicker-toggle>
<ngx-mat-datetime-picker
#raceDatetimePicker
[color]="color"
[enableMeridian]="true"
disabled = "false">
</ngx-mat-datetime-picker>
</mat-form-field>
UPDATE: I fixed the issue. It turns out it was a problem with how I was setting the moment adapter options in my app.module.ts file. If you are having issues, make sure to set your providers correctly. Here is how I am setting mine in my app.module.ts:
import {
NgxMatMomentModule,
NgxMatMomentAdapter,
NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS,
} from '@angular-material-components/moment-adapter';
import {
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NGX_MAT_DATE_FORMATS,
NgxMatDateAdapter,
} from '@angular-material-components/datetime-picker';
// set format as per your liking here
export const CUSTOM_MOMENT_FORMATS = {
parse: {
dateInput: 'l, LT',
},
display: {
dateInput: 'M/D/YYYY, h:mm A', // Same format as above, in parse
// dateInput: 'LLL', //descriptive format e.g. full month name, etc.
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
declarations: [
... //app components here
],
imports: [
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NgxMatMomentModule,
... //other app module imports here
],
providers: [
{
provide: NGX_MAT_MOMENT_DATE_ADAPTER_OPTIONS,
useValue: { useUtc: false },
},
{ provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_MOMENT_FORMATS },
{ provide: NgxMatDateAdapter, useClass: NgxMatMomentAdapter },
FormsModule,
...//any other providers your app requires here
],
})
export class AppModule {}
Getting the same error with angular v10 & datetime-picker v4
Getting the same error with angular v10 all versions
Getting the same error with angular v11 and datetime-picker v5
Had this error on Angular 12 with all datetime-picker versions, but after upgrading to datetime-picker 6 it works fine (except hours, but it's another issue :D)