Angular 18 ngbDatepicker 不使用 ngModel 更新值

Question

我尝试使用 ngbDatepicker，但我无法让它与 ngModel 一起使用。它不会更新相关变量，也不会从中提取值。

以下是如何从头开始重现我的问题的一些简单步骤。

我创建了一个新的 Angular 18 应用程序，如下所示：

ng new try-app

我选择了 SCSS 和无服务器端渲染。

然后我像这样安装了 ng-bootstrap：

npm install @ng-bootstrap/[email protected]

然后我编辑了 try-app\src pp pp.component.ts - 结果是这样的：

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { NgbDateStruct, NgbModule } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FormsModule, NgbModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
    myDate?: NgbDateStruct;
    show() {
        console.log(this.myDate);
        alert(this.myDate);
    }
}

然后我编辑了 try-app\src pp pp.component.html - 结果是这样的：

<input class="form-control" name="myDate" [(ngModel)]="myDate" ngbDatepicker #myDate="ngbDatepicker" (click)="myDate.toggle()" readonly />
<input type="button" (click)="show()" value="Show" />

然后我用 ngserve 运行我的应用程序。

当我使用日期选择器输入字段选择日期时，假设是 2025-01-06，然后单击“显示”按钮，它显示未定义。

如果我然后尝试为 myDate 赋予初始值，如下所示：

myDate: NgbDateStruct = {year: 2000, month: 2, day: 10}

myDate 变量中的日期值未显示在输入字段中。

Answer 1

模板中存在名称冲突。 在模板中，您声明一个指向 datePicker 的局部变量 #myDate，并在 .ts 文件中声明具有相同名称的日期。 如果您更改其中之一的名称，它将按预期工作。 例如：

<input class="form-control" name="myDate" [(ngModel)]="myDate" ngbDatepicker #myDatePicker="ngbDatepicker" (click)="myDatePicker.toggle()" readonly />