I want to add multiple date time pickers (inputs) in my angular web application using @angular-material-components/datetime-picker, but I received an error.
core.mjs:10194 ERROR Error: Uncaught (in promise): NullInjectorError: R3InjectorError(AppModule)[NgxMatDatepickerBase -> NgxMatDatepickerBase]:
NullInjectorError: No provider for NgxMatDatepickerBase!
NullInjectorError: R3InjectorError(AppModule)[NgxMatDatepickerBase -> NgxMatDatepickerBase]:
NullInjectorError: No provider for NgxMatDatepickerBase!
at NullInjector.get (core.mjs:8771:27)
at R3Injector.get (core.mjs:9200:33)
at R3Injector.get (core.mjs:9200:33)
at ChainedInjector.get (core.mjs:13009:36)
at lookupTokenUsingModuleInjector (core.mjs:4436:39)
at getOrCreateInjectable (core.mjs:4484:12)
at Module.ɵɵdirectiveInject (core.mjs:10780:12)
at NodeInjectorFactory.NgxMatDatepickerActions_Factory [as factory] (angular-material-components-datetime-picker.mjs:132:129)
at getNodeInjectable (core.mjs:4669:44)
at instantiateAllDirectives (core.mjs:11600:27)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:25998:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:25998:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:26308:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
handleError @ core.mjs:10194
next @ core.mjs:27087
next @ Subscriber.js:91
_next @ Subscriber.js:60
next @ Subscriber.js:31
(anonymous) @ Subject.js:34
errorContext @ errorContext.js:19
next @ Subject.js:27
emit @ core.mjs:22781
(anonymous) @ core.mjs:26347
invoke @ zone.js:368
run @ zone.js:129
runOutsideAngular @ core.mjs:26220
onHandleError @ core.mjs:26347
handleError @ zone.js:372
runGuarded @ zone.js:142
api.microtaskDrainDone @ zone.js:1054
drainMicroTaskQueue @ zone.js:588
invokeTask @ zone.js:487
invokeTask @ zone.js:1631
globalCallback @ zone.js:1662
globalZoneAwareCallback @ zone.js:1695
Show 22 more frames
Show less
In my code, I added following code lines into that respective files, those are as follows,
app.module.ts
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MaterialModule,
NgxMatDatetimePickerModule,
NgxMatTimepickerModule,
NgxMatNativeDateModule,
],
CreateCardComponent.component.ts
export class CreateCardComponent {
@ViewChild('startDateTimepicker') startDateTimepicker: any;
@ViewChild('endDateTimepicker') endDateTimepicker: any;
public date = new Date();
public disabled = false;
public showSpinners = true;
public showSeconds = false;
public touchUi = false;
public enableMeridian = false;
public stepHour = 1;
public stepMinute = 1;
public stepSecond = 1;
hideTime = false;
disableMinute = false;
}
createCard.component.html
<mat-form-field class="width-30" appearance="outline">
<mat-label>Start</mat-label>
<input
matInput [ngxMatDatetimePicker]="startDateTimepicker" placeholder="Choose a date"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="$any(startDateTimepicker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker
#startDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [enableMeridian]="enableMeridian"
[disableMinute]="false" [hideTime]="false">
<ngx-mat-datepicker-actions>
<button mat-button ngxMatDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
</ngx-mat-datepicker-actions>
</ngx-mat-datetime-picker>
</mat-form-field>
<mat-form-field class="width-30" appearance="outline">
<mat-label>End</mat-label>
<input
matInput [ngxMatDatetimePicker]="endDateTimepicker" placeholder="Choose a date"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="$any(endDateTimepicker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker
#endDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [enableMeridian]="enableMeridian"
[disableMinute]="false" [hideTime]="false">
</ngx-mat-datetime-picker>
<ngx-mat-datepicker-actions>
<button mat-button ngxMatDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
</ngx-mat-datepicker-actions>
</mat-form-field>
What is causing the issue to occur and how can I resolve it?
Versions in my application:
"@angular-material-components/datetime-picker": "^16.0.1",
"@angular/core": "^16.0.0",
Thanks!
I have fixed this issue. This issue has been occurred due to the place of added <ngx-mat-datepicker-actions>
Fix: <ngx-mat-datepicker-actions> should be added in to between <ngx-mat-datetime-picker>, not after closing that element.
Fixed code as follows,
<mat-form-field class="width-30" appearance="outline">
<mat-label>Start</mat-label>
<input
matInput [ngxMatDatetimePicker]="startDateTimepicker" placeholder="Choose a date"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="$any(startDateTimepicker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker
#startDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [enableMeridian]="enableMeridian"
[disableMinute]="false" [hideTime]="false">
<ngx-mat-datepicker-actions>
<button mat-button ngxMatDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
</ngx-mat-datepicker-actions>
</ngx-mat-datetime-picker>
</mat-form-field>
<mat-form-field class="width-30" appearance="outline">
<mat-label>End</mat-label>
<input
matInput [ngxMatDatetimePicker]="endDateTimepicker" placeholder="Choose a date"
[disabled]="disabled">
<mat-datepicker-toggle matSuffix [for]="$any(endDateTimepicker)"></mat-datepicker-toggle>
<ngx-mat-datetime-picker
#endDateTimepicker [showSpinners]="showSpinners" [showSeconds]="showSeconds"
[stepHour]="stepHour" [stepMinute]="stepMinute" [stepSecond]="stepSecond"
[touchUi]="touchUi" [enableMeridian]="enableMeridian"
[disableMinute]="false" [hideTime]="false">
<ngx-mat-datepicker-actions>
<button mat-button ngxMatDatepickerCancel>Cancel</button>
<button mat-raised-button color="primary" ngxMatDatepickerApply>Apply</button>
</ngx-mat-datepicker-actions>
</ngx-mat-datetime-picker>
</mat-form-field>
Thanks!