@ng-bootstrap NgbDatepicker 遇到“无法绑定到 'ngModel'，因为它不是 'ngb-datepicker' 的已知属性” [重复]

Posted 2023-05-07

【中文标题】@ng-bootstrap NgbDatepicker 遇到“无法绑定到 \'ngModel\'，因为它不是 \'ngb-datepicker\' 的已知属性” [重复]

【英文标题】：@ng-bootstrap NgbDatepicker met "Can't bind to 'ngModel' since it isn't a known property of 'ngb-datepicker'" [duplicate]@ng-bootstrap NgbDatepicker 遇到“无法绑定到 'ngModel'，因为它不是 'ngb-datepicker' 的已知属性” [重复]

【发布时间】：2017-02-25 10:00:18

【问题描述】：

我使用 @ng-bootstrap/ng-bootstrap 和 Angular2-cli

使用 NgbDatepicker 遇到错误：

Ng 模块：

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

组件--

导出类 TestComponent 实现 OnInit

模型：NgbDateStruct；

和 html--

将 TestModule 添加到另一个模块时，

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

和html：

<app-test></app-test>

有错误：

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】：

您缺少 FormsModule。尝试像这样导入-

import FormsModule from '@angular/forms';

并像这样在 AppModule 中使用它-

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

你也可以像这样使用 ngbDatepicker-

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

示例插件：https://plnkr.co/edit/ZC3dOX9anbbNUMPEEd5W?p=preview

看看这是否有帮助。

【讨论】：

Can't bind to 'ngModel' since it isn't a known property of 'input'.

尝试将 FormsModule 导入到您的 appModule 中

是的，这项工作也适合我