@ng-bootstrap NgbDatepicker met “Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'” [duplicate]

匿名 (未验证) 提交于 2019-12-03 02:31:01

问题:

I use @ng-bootstrap/ng-bootstrap and Angular2-cli

with NgbDatepicker met errs :

NgModule:

@NgModule({   imports: [CommonModule,NgbModule.forRoot()],   declarations: [TestComponent],   exports: [TestComponent] }) 

component--

export class TestComponent implements OnInit {

model: NgbDateStruct;

}

and html--

< ngb-datepicker #dp [(ngModel)]="model">< /ngb-datepicker>

when add TestModule to another module ,

@NgModule({   imports: [SharedModule,LoginRoutingModule,TestModule],   declarations: [LoginComponent], }) 

and html:

<app-test></app-test> 

there is the err:

error_handler.js:47EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.  ("   <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker>  "): TestComponent@1:22ErrorHandler.handleError @ error_handler.js:47next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 error_handler.js:52ORIGINAL STACKTRACE:ErrorHandler.handleError @ error_handler.js:52next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 error_handler.js:53Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.  ("   <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker>  "): TestComponent@1:22     at resolvePromise (zone.js:429)     at zone.js:406     at ZoneDelegate.invoke (zone.js:203)     at Object.onInvoke (ng_zone_impl.js:43)     at ZoneDelegate.invoke (zone.js:202)     at Zone.run (zone.js:96)     at zone.js:462     at ZoneDelegate.invokeTask (zone.js:236)     at Object.onInvokeTask (ng_zone_impl.js:34)     at ZoneDelegate.invokeTask (zone.js:235)ErrorHandler.handleError @ error_handler.js:53next @ application_ref.js:272schedulerFn @ async.js:82SafeSubscriber.__tryOrUnsub @ Subscriber.js:223SafeSubscriber.next @ Subscriber.js:172Subscriber._next @ Subscriber.js:125Subscriber.next @ Subscriber.js:89Subject.next @ Subject.js:55EventEmitter.emit @ async.js:74onError @ ng_zone.js:119onHandleError @ ng_zone_impl.js:64ZoneDelegate.handleError @ zone.js:207Zone.runGuarded @ zone.js:113_loop_1 @ zone.js:379drainMicroTaskQueue @ zone.js:386 zone.js:355Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.  ("   <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker>  "): TestComponent@1:22 ; Zone: angular ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'. 1. If 'ngb-datepicker' is an Angular component and it has 'ngModel' input, then verify that it is part of this module. 2. If 'ngb-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.  ("   <ngb-datepicker #dp [ERROR ->][(ngModel)]="model"></ngb-datepicker>  "): TestComponent@1:22     at TemplateParser.parse (http://localhost:4200/main.bundle.js:18077:19)     at RuntimeCompiler._compileTemplate (http://localhost:4200/main.bundle.js:42938:51)     at http://localhost:4200/main.bundle.js:42860:83     at Set.forEach (native)     at compile (http://localhost:4200/main.bundle.js:42860:47)     at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:99970:28)     at Object.onInvoke (http://localhost:4200/main.bundle.js:71761:37)     at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:99969:34)     at Zone.run (http://localhost:4200/main.bundle.js:99863:43)     at http://localhost:4200/main.bundle.js:100229:57consoleError @ zone.js:355_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386 zone.js:357Error: Uncaught (in promise): Error: Template parse errors:(…)consoleError @ zone.js:357_loop_1 @ zone.js:382drainMicroTaskQueue @ zone.js:386 

回答1:

You are missing FormsModule. Try importing like this-

import {FormsModule} from '@angular/forms'; 

and use it in AppModule like this-

@NgModule({   imports: [ BrowserModule, FormsModule, NgbModule ], 

You can use ngbDatepicker like this too-

<input class="form-control" placeholder="yyyy-mm-dd" name="dp1" [(ngModel)]="newItem.EndTime"  ngbDatepicker #d1="ngbDatepicker" required> 

sample plunker: https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview

See if this helps.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!