未在Angular 2引导数据选择器的输入上设置值

我有一个输入，我想用Angular 2引导日期选择器填充它。当页面打开时，通过使用

value=“{{getStartDate（）| date:'fullDate'}}”

以今天的日期启动该值。但是，当我单击按钮并打开datepicker并选择新日期时，该值不会填充输入。我也不能再点击按钮关闭日期选择器

HTML:

<form class="form-inline">
<div>
<div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}">
  <input value="{{ getStartDate() | date:'fullDate'}}" style="width:250px" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">
</div>
<div style="display:inline-block">
  <ngb-datepicker *ngIf="startCheck==true;" [(ngModel)]="dt" class="dropdown-toggle" [ngModelOptions]="{standalone: true}" style="position:absolute; z-index:1"></ngb-datepicker>
</div>
<button type="button" class="btn icon-calendar" (click)="showDatePick()"></button>
<button type="button" class="btn icon-search" [disabled]="!secondForm.valid"></button>
 </div>
 </form>

---

ng bootstrap datepicker的模型不是Date（）对象，而是一个由{month，day，year}组成的NgbDateStruct

为了获得所需的行为，代码如下所示：

import {DatePipe} from "@angular/common";

@Component({providers: [DatePipe]})

public constructor(fb: FormBuilder, private datePipe: DatePipe)
public dt: NgbDateStruct;
<...>
public getStartDate():number {
let timestamp = this.dt != null ? new Date(this.dt.year, this.dt.month-1, this.dt.day).getTime() : new Date().getTime();
this.secondForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'fullDate'));
}

从“@angular/common”导入{DatePipe}；
@组件（{providers:[DatePipe]}）
公共构造函数（fb:FormBuilder，私有datePipe:datePipe）
公共dt:NgbDateStruct；
public getStartDate（）：编号{
让timestamp=this.dt！=null？新日期（this.dt.year，this.dt.month-1，this.dt.day）；
this.secondForm.controls['startDate'].setValue（this.datePipe.transform（timestamp，'fullDate'））；
}

标记更改为：

下面是完整的plunker：

请注意，ng bootstrap团队的月份索引是基于0的，而不是基于1的，这在将本机日期对象与NgbDate结合使用时非常令人恼火

---

另外，默认值为new Date（）.getTime（）的写入方式意味着您永远不会有一个不需要的空值。而且它总是脏的和有效的。

你在控制台上看到任何错误吗？@ClaudioRedi抱歉，是的，未捕获错误：引导工具提示需要Tether（），我不熟悉该错误，但你有一个查找的起点，似乎缺少了一些工具提示happy@ClaudioRedi我能够在我的

index.html

中添加脚本标记来消除该错误。在

输入

和

日期选择器

though@ClaudioRedi我将

[（ngModel）]=“dt”

更改为

[ngModel]=“dt”

，并添加了

（ngModelChange）=“getStartDate（$event）”

，并且

输入仍然不会填充，但再次单击打开日期选择器的按钮将关闭日期选择器，就像我希望它关闭一样。日期选择器的输入现在显示出来，但getting console error
Type“number | Date”不能分配给Type“number”。类型“Date”不能分配给类型“number”。
此外，现在我的表单验证在我选择日期时无法识别有输入，因此我的按钮将保持禁用状态，除非我在那里手动键入内容。就像在plunker示例中一样。更新为，以便表单控件正确捕获正在设置的值。如何将
startDate
和
endDate
初始化为其他值，或者什么都不初始化？我尝试了
'startDate'：[null，Validators.required]
但是
日期管道
阻碍了这一点。此外，使用
DatePipe
不允许我在需要时将输入存储为空白，它始终保持填充状态。
import {DatePipe} from "@angular/common";

@Component({providers: [DatePipe]})

public constructor(fb: FormBuilder, private datePipe: DatePipe)
public dt: NgbDateStruct;
<...>
public getStartDate():number {
let timestamp = this.dt != null ? new Date(this.dt.year, this.dt.month-1, this.dt.day).getTime() : new Date().getTime();
this.secondForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'fullDate'));
}