material-component-datetime-picker-You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable

user_2368872 0
Viewed 4755

I have tried to use the material-component-datetime-picker according to the documentation and following information contain about the environment.

Angular

Angular version : 10.1.0

material version : 10.1.0

angular-material-components/moment-adapter - 4.0.1

angular-material-components/datetime-picker - 4.0.2

Following is the code block to view datetime picker.

<mat-form-field> <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date" [formControl]="tab._from" [min]="minDate" [max]="maxDate" [disabled]="disabled"> <mat-datepicker-toggle matSuffix [for]="picker"> </mat-datepicker-toggle> <ngx-mat-datetime-picker #picker [showSpinners]="showSpinners" [showSeconds]="showSeconds" [stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond" [touchUi]="touchUi" [color]="color"> </ngx-mat-datetime-picker> </mat-form-field>

When I try to load the page, datetime-picker appears but following error appears on console.

ERROR TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable. at subscribeTo (subscribeTo.js:27) at subscribeToResult (subscribeToResult.js:11) at MergeMapSubscriber._innerSub (mergeMap.js:59) at MergeMapSubscriber._tryNext (mergeMap.js:53) at MergeMapSubscriber._next (mergeMap.js:36) at MergeMapSubscriber.next (Subscriber.js:49) at Observable._subscribe (subscribeToArray.js:3) at Observable._trySubscribe (Observable.js:42) at Observable.subscribe (Observable.js:28) at MergeMapOperator.call (mergeMap.js:21)

enter image description here

TS File

export class Picker {
   @ViewChild('fromPicker') fromPicker: any;
  @ViewChild('toPicker') toPicker: any;

  public date: moment.Moment;
  public disabled = false;
  public showSpinners = true;
  public showSeconds = false;
  public touchUi = false;
  public enableMeridian = false;
  public minDate: moment.Moment;
  public maxDate: moment.Moment;
  public stepHour = 1;
  public stepMinute = 1;
  public stepSecond = 1;
  public color: ThemePalette = 'primary';

  public stepHours = [1, 2, 3, 4, 5];
  public stepMinutes = [1, 5, 10, 15, 20, 25];
  public stepSeconds = [1, 5, 10, 15, 20, 25];
}

Seems like the error is related to picker that we use.

Any reason or any missing dependencies?

angular-material angular datetimepicker
5 Answers
user_47705280

In version 4.0.3 worked for me too. Update your package.

user_59035950

For angular v11 upgrade @angular-material-components/datetime-picker to v 5.1.0 which fixes this bug

user_104131620

First of all you are using ngx-mat-datetime-picker which is wrapper plugin for angular material datepicker: https://www.npmjs.com/package/ngx-mat-datetime-picker

Implementation looks good, though error must be coming because you are not passing the expected value with proper type in attributes. Some component property is being undefined which you are passing to attribute. you can revisit the demo implementation and check if you are sending the right values:

https://stackblitz.com/edit/demo-ngx-mat-datetime-picker?file=src%2Fapp%2Fapp.component.html

user_93329570

I'm having the same problem Angular 11.1.0 Material 11.1.0 datetime-picker: 5.0.3

I've managed to isolate the problem somewhat, it occurs here:

    _watchStateChanges() {
        const datepickerStateChanged = this.datepicker ? this.datepicker.stateChanges : of();
        const inputStateChanged = this.datepicker && this.datepicker.datepickerInput ?
            this.datepicker.datepickerInput.stateChanges : of();
        const datepickerToggled = this.datepicker ?
            merge(this.datepicker.openedStream, this.datepicker.closedStream) :
            of();
        this._stateChanges.unsubscribe();
        this._stateChanges = merge(this._intl.changes, datepickerStateChanged, inputStateChanged, datepickerToggled).subscribe(() => this._changeDetectorRef.markForCheck());
    }

For some reason, datepickerStateChanged is undefined here. Which is what causes the problems further down the line. No idea why yet though. If anyone has more of an answer then that, that would be awesome. For now, I'm gonna file this as a bug.

Already in there it seems: https://github.com/h2qutc/angular-material-components/issues/94

They suggest downgrading to 4.0.3, which is what I'll be trying tomorrow.

user_10537520
Related