Пожалуйста, Кто-нибудь подскажет, как связать значение datepicker в моей форме, используя 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>

Я добавил компонент datepicker. Работает нормально. я собираюсь DatePicker в моей форме, но я не могу связать свое значение DatePicker используя [(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>