2016-08-23 92 views
1

我有一個綁定到模型中的值的輸入。Angular 2 - ngModel沒有從datepicker更新

 <input type="text" class="form-control" [(ngModel)]="currentDate"> 

我有,我用它來填充這個輸入一個日期選擇器。當通過日期選擇器選擇一個值時,輸入似乎沒有更新模型,因爲它沒有向代碼中更遠的位置觸發管道。

但是,如果我手動輸入到輸入字段中,那麼ngModel確實會更新,因爲管道會根據新值啓動過濾。我爲輸入綁定了一個'on change'處理程序,在輸入時或使用datepicker時觸發。

$('#datepicker').datepicker().on('changeDate', function(e){ 
     //Fires on change 
    }) 

有手動觸發ngModel改變事件的方式,還是有更優雅的解決方案別人知道的?

+1

是否'changeDate'火災時你從datepicker更改日期?你有沒有嘗試從'changeDate'事件設置currentDate? –

+0

使用日期選取器事件來糾正值確實有效。感覺有點笨拙不得不手動綁定,但如果它的工作,它的作品。 感謝馬杜! –

回答

0

使用datepicker自己的事件我能夠手動更新模型值。

AttachDateChangeHandler(): void { 
    $('#datepicker').datepicker().on('changeDate', (e)=> { 
     this.currentDate = e.date.***() 
    }) 
} 

感謝Madhu Ranjan的建議。

+0

e.date中的*是什麼***()?我在這裏得到一個錯誤 – Brett

+0

@Brett你會想要將它轉換爲你想要的日期格式。我使用e.date.toLocaleDateString() –

1

你可以做這種方式,引發Angular2的變化檢測..

看到這個plunker

setTimeout(() => { 
    $('#myinput').val("changed.."); 

    var evt = new Event("input", {"bubbles":true, "cancelable":false}); 

    $('#myinput')[0].dispatchEvent(evt); 

}, 5000);