[Fixed] ngbTimepicker not working in ngbmodal with reactive form

Issue

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';

@NgModule({
declarations: [
  ...
],
imports: [
   ...
   NgbModule.forRoot(),
],
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.

Solution

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.