1

这个输入元素是一个 Datepicker Widget。日期属性值例如“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 的最佳方法是什么？

4

1 回答 1

1

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

有关 ngModel 为何无法读取 jQuery-UI 对象的解释，请查看我之前在类似线程上发表的这篇文章。

ngModel 依赖于对本地 DOM 对象的访问——jQuery 将这些对象抽象为它自己的自定义 jQuery 对象。Angular 没有处理这个 jQuery 对象的 API。

于 2017-05-03T13:29:31.150 回答