Angular 2 ngModel не может отслеживать / связывать значение в виджете / элементе ввода jQuery Datepicker, почему?

Этот элемент ввода является виджетом Datepicker. Значение свойства даты, например, «09/09/1999» загружается в представление шаблона, а в календаре Datepicker выбирается та же дата, работает должным образом. Привязка компонента к шаблону в порядке.

Но когда я меняю дату в интерактивном календаре Datepicker, выбранная дата отображается в поле ввода, но свойство даты в компоненте не обновляется. И когда я использую (ngSubmit) = 'search (form.value)', значение form.date объекта формы такое же, как и раньше.

--template---    
<form #form='ngForm' (ngSubmit)='search(form.value)'>    
<input type="text" id="datepicker" [(ngModel)]="date" name="date">    
<button type="submit"> click </button>
</form>

--component---
export class AppComponent {    
    public date = "09/09/1999";    
    search(form: any) {
        console.log("date:" + form.date);   // date: 
    }    
}

Да, я могу использовать локальную переменную шаблона #date для передачи входного значения компоненту, например (ngSubmit) = "search (date.value)". Но для множественного ввода Datepicker я могу объединить значение локальных переменных и передать его параметр в search ().

Я хочу знать, почему ngModel не может отслеживать изменение ввода datepicker и как лучше всего обновить свойство компонента или form.value?


person SayedRakib    schedule 03.05.2017    source источник
comment
Почему вы используете jQuery с Angular? jQuery - такая головная боль - он оборачивает собственные объекты DOM в пользовательскую оболочку, что вызывает кошмары для фреймворков JS, таких как Angular. Если вам нужен datepicker, вы можете использовать одну из многих библиотек ng. ngx-bootstrap, чтобы назвать его.   -  person Daniel Cooke    schedule 03.05.2017
comment
Я использую jQuery, потому что мои ожидаемые функции и стили пользовательского интерфейса datepicker очень доступны в jQuery datepicker, но не в других angular datepickers, например. ngx-bootstrap. И я еще не достаточно опытен, чтобы понять, как jQuery и JS-фреймворк, такие как angular, делают вещи завершенными. Но есть ли у вас какие-либо предложения по ее решению, если я все еще хочу использовать jQuery, или объяснение, почему ngModel не может прочитать входное значение datepicker. Спасибо за ваш комментарий.   -  person SayedRakib    schedule 03.05.2017


Ответы (1)


Я не могу посоветовать вам заставить jQuery datepicker работать с Angular - так как это потребует серьезной перезаписи ядра jQuery или ядра Angular.

Чтобы узнать, почему ngModel не может читать объекты jQuery-UI, обратитесь к этой публикации, которую я сделал ранее в аналогичной теме.

ngModel полагается на доступ к собственным объектам DOM - jQuery абстрагирует эти объекты в свой собственный объект jQuery. В Angular нет API для работы с этим объектом jQuery.

person Daniel Cooke    schedule 03.05.2017