Question

此input元素是Datepicker Widget。日期属性值，例如＆＃34; 09/09 / 1999＆＃34;加载到模板视图，并在Datepicker日历中选择相同的日期，按预期工作。从组件到模板的绑定是可以的。

但是当我在Datepicker交互式日历中更改日期时，所选日期将显示在输入框中，但组件中的日期属性不会更新。当我使用（ngSubmit）=＆＃39; search（form.value）＆＃39;时，表单对象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）=＆＃34; search（date.value）＆＃34;。但是对于多输入Datepicker，我可以连接局部变量值并将其传递给search（）。

我想知道为什么ngModel无法跟踪datepicker输入中的更改以及更新组件属性或form.value的最佳方法是什么？

Answer 1

我不能建议你让jQuery datepicker与Angular一起工作 - 因为它需要重写核心jQuery或核心Angular。

关于为什么ngModel无法读取jQuery-UI对象的解释有look at this post I made earlier on a similar thread.

ngModel依赖于对本机DOM对象的访问--jQuery将这些对象抽象为自己的自定义jQuery对象。 Angular没有用于处理此jQuery对象的API。

Angular 2 ngModel无法跟踪/绑定jQuery Datepicker小部件/输入元素中的值，为什么？

1 个答案: