Входное значение не обновляется с помощью средства выбора даты JQuery в Angular 7

Question

Я использую Угловой 7 с JQuery DatePicker: https://github.com/uxsolutions/bootstrap-datepicker

           <div class="col-lg-2">
              <div class="form-group">
                <div class="input-group">
                  <input class="form-control form-control-lg" data-provide="datepicker" data-date-language="fr" type="text" data-date-format="dd/mm/yyyy" placeholder="From" [(ngModel)]="from" name="from" />
                  <div class="input-group-append">
                    <span class="input-group-text"><i class="fa fa-calendar" aria-hidden="true"></i></span>
                  </div>
                </div>
              </div>
            </div>

Но в компоненте это значение я получаю в this.fromis undefined ..

export class SearchBarComponent implements OnInit {
  constructor(
    private router: Router
  ) { }

  search: string;
  from: string;
  to: string;

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.from)
  }
}

Я не хочу использовать пакет как ng-boostrap или ngx-boostrap, потому что я не хочу обманывать навигационную панель, чтобы она заработала.И я предпочитаю контролировать зависимости Boostrap.

Есть ли простой способ следить за изменениями этого входного значения, пожалуйста?Я не нашел этот ответ ясно в вопросах, которые могут существовать.

Answer 1

Вы можете использовать changeDate событие

ngOnInit() {
$('.datepicker').datepicker()
    .on("changeDate", function(date) {
        this.from = date;
    });
 }

больше информации о событиях