[Fixed] ngbTimepicker not working in ngbmodal with reactive form


I got an error (There is no directive with “exportAs” set to “NgbTimepicker”) when trying to use NgbTimepicker in a reactive form in a modal.

In app.module.ts, I import ngbModule:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

declarations: [
imports: [
providers: [],
bootstrap: [AppComponent]

In the page.component.ts,

import { NgbModal, NgbTimepicker} from '@ng-bootstrap/ng-bootstrap';


 workingStartTime: [null, Validators.compose([Validators.required])],

In the page.component.html

 <input type="text" formControlName="workingStartTime" placeholder=""
        NgbTimepicker #timepicker="NgbTimepicker (click)="timepicker.toggle()">

I spent some hours without success looking what is wrong. Am i doing something wrong? Thanks.


you are doing in wrong way, from ng-bootstrap also mentioned to use like:

<ngb-timepicker [(ngModel)]="time" formControlName="time"></ngb-timepicker>

I have posted a sample in stackblitz

Hope this works, Check and let me know if you need more in this.

Leave a Reply

(*) Required, Your email will not be published