Angular 2 ngModel無法跟蹤/綁定jQuery Datepicker widget/Input元素中的值，爲什麼？

此輸入元素是Datepicker控件。 date屬性值，例如「09/09/1999」被加載到模板視圖中，並且在Datepicker日曆中選擇相同的日期，按預期工作。從組件到模板的綁定是可以的。Angular 2 ngModel無法跟蹤/綁定jQuery Datepicker widget/Input元素中的值，爲什麼？

但是，當我在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）= 「搜索（date.value）」。但是對於多輸入Datepicker，我可以連接局部變量值並將其傳遞給search（）。

我想知道爲什麼ngModel無法跟蹤datepicker輸入中的更改以及更新組件屬性或form.value的可能最佳方式是什麼？

來源

2017-05-03 SayedRakib

爲什麼你用jQuery與Angular？ jQuery非常頭疼 - 它將原生DOM對象封裝在自定義包裝器中，這會導致JS框架（如Angular）的噩夢。如果你需要日期選擇器，你可以使用許多ng庫中的一個。 ngx-bootstrap命名一個。 –

我使用的是jQuery，因爲我預期的datepicker UI功能和樣式在jQuery datepicker中非常有用，但在其他角度日期選擇器NGX-引導。而且我還沒有足夠的技巧來理解jQuery和JS框架如何使角度變得更加複雜。但是，如果我仍然想使用jQuery，你有任何建議來解決它，或者解釋爲什麼ngModel無法讀取datepicker輸入值。謝謝你的評論。 – SayedRakib

我不能建議你讓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。

來源

2017-05-03 13:29:31

Angular 2 ngModel無法跟蹤/綁定jQuery Datepicker widget/Input元素中的值，爲什麼？

回答

相關問題