使用ng-model-options updateOn：blur with uib-datepicker popup

我有一個允許用戶通過uib-datepicker日曆（https://angular-ui.github.io/bootstrap/）鍵入或選擇日期的輸入。當用戶點擊日期選擇器彈出，允許用戶進行選擇這裏，輸入是輸入：使用ng-model-options updateOn：blur with uib-datepicker popup

<input 
    datepicker-append-to-body="calendarCtrl.appendToBody" 
    uib-datepicker-popup="calendarCtrl.dateFormat" 
    ng-model="calendarCtrl.ngModel" 
    ng-click="calendarCtrl.open"/>

我需要讓用戶的選擇不更新NG-模型直到用戶已經模糊了輸入。要做到這一點，我正在嘗試使用ng-model-options。

ng-model-options={updateOn: 'blur'}

這個偉大的工程，當用戶鍵入日期到輸入 - 不更新ngModel直到出現模糊和任何驗證是不是跑了，直到模糊。問題在於它打破了日曆彈出窗口的功能，因爲當用戶點擊打開的日曆選擇日期時，什麼都不會發生。我假設，因爲當用戶點擊日曆本質上輸入發生模糊事件？

有沒有人遇到過這個問題？是否有一個ng-model-options選項或日期選擇器內的某個選項，它允許用戶仍然從datepicker中進行選擇，但在輸入發生模糊之前不更新ng-model？

感謝

來源

2016-11-21 techer

聽起來像是你可以在日期選擇器使用臨時性質ng-model="calendarCtrl.tempSelectedDate"爲ngModel。

然後使用ngBlur事件（https://docs.angularjs.org/api/ng/directive/ngBlur）來更新不動產即。設置爲calendarCtrl.ngModel = calendarCtrl.tempSelectedDate。

此外，雖然沒有什麼能阻止您使用ngModel中的範圍屬性calendarCtrl.ngModel，但如果使用更有意義的名稱（如ng-model="calendarCtrl.dateSelected"），代碼將更易於閱讀。

這是一個工作演示http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview。

我分叉和擴大別人的日期選擇器plnkr有兩個變化：增加ng-blur="blurDate = startDate"到<input> &與Blur Date: {{ blurDate }}顯示值。

來源

2016-11-21 06:19:09

我已經添加了一個示例plnkr –

在我的情況下ng-blur每次單擊輸入時都會被調用，因爲彈出的日曆調用了模糊。在我的模糊函數中，我將ngModelController設置爲$ dirty，然後觸發驗證任何錯誤。我最終通過監聽輸入元素的一個關鍵字並將輸入設置回$ pristine來解決它。然後，當用戶點擊日曆彈出窗口或通過點擊模糊輸入時，表單會重新設置爲$ dirty並查找驗證錯誤。哈克解決方案，但基於預先存在的代碼似乎是唯一的選擇。 – techer

使用ng-model-options updateOn：blur with uib-datepicker popup

回答

相關問題