angular-material-components icon indicating copy to clipboard operation
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.

Open DavidKim01 opened this issue 3 years ago • 4 comments

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 {}

DavidKim01 avatar Jul 12 '21 15:07 DavidKim01

Getting the same error with angular v10 & datetime-picker v4

drekthral avatar Jul 13 '21 09:07 drekthral

Getting the same error with angular v10 all versions

JulioBarrera19 avatar Jul 13 '21 13:07 JulioBarrera19

Getting the same error with angular v11 and datetime-picker v5

obinnaogbonnajoseph avatar Jul 16 '21 05:07 obinnaogbonnajoseph

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)

YugasVasyl avatar Aug 17 '21 20:08 YugasVasyl