有人建议如何使用ng模型在我的表单中绑定日期选择器值

Question

这里是datepicker.ts

import { Component, HostListener, ViewChild } from '@angular/core';
import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
@Component({
selector: 'demo-date-picker-hide-on-scroll',
templateUrl: './datepicker-popup.html'
})
export class DemoDatepickerHideOnScrollComponent {
@ViewChild(BsDatepickerDirective) datepicker: 
BsDatepickerDirective;
@HostListener('window:scroll')
onScrollEvent() {
this.datepicker.hide();
}
}

和datepicker.html

<div class="row">
<div class="col-xs-12 col-12 col-md-9 form-group">
<input
placeholder="Datepicker"
class="form-control"
#dp="bsDatepicker"
bsDatepicker>
</div>
</div>

我添加了日期选择器组件。它工作正常。我得到了 表单中的日期选取器，但我无法绑定我的日期选取器值 使用[(ngModel)].拜托，有人建议获得价值的方法 我的控制台。

Answer 1

你可以通过以下方式使用ngModel，

<div class="row">
<div class="col-xs-12 col-12 col-md-9 form-group">
<input
placeholder="Datepicker"
class="form-control"
#dp="bsDatepicker"
bsDatepicker [ngModel]="date"
(ngModelChange)="date = $event.toLocaleDateString()">
</div>
</div>

Answer 2

<div class="row">
<div class="col-xs-12 col-12 col-md-9 form-group">
<input
placeholder="Datepicker"
class="form-control"
#dp="bsDatepicker"
bsDatepicker [ngModel]="date"
(ngModelChange)="($event.toLocaleDateString())=>{this.date=new Date($event.toLocaleDateString())}">
</div>
</div>