1

У меня есть вход, который позволяет пользователю вводить или выбирать дату через календарь uib-datepicker (https://angular-ui.github.io/bootstrap/). Когда пользователь нажимает на ввода DatePicker выскакивает вверх, позволяя пользователю сделать выбор Вот вход:Использование 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-model-options.

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

Это прекрасно работает, когда пользователь вводит дату на входе - ngModel не обновляется, пока пятно не происходит, и любая проверка не не просуществовала до размытия. Проблема заключается в том, что он нарушает функциональность всплывающего окна календаря, когда ничего не происходит, когда пользователь затем нажимает на открытый календарь, чтобы выбрать дату. Я предполагаю, что, когда пользователь нажимает на календарь, по-прежнему происходит событие размытия на входе?

Неужели кто-нибудь столкнулся с этой проблемой? Есть ли опция ng-model-options или что-то в пределах datepicker, которая позволит пользователю по-прежнему делать выбор из datepicker, но не обновлять ng-модель до тех пор, пока на входе не появится размытие?

Благодаря

ответ

2

Похоже, вы могли бы использовать временную собственность ng-model="calendarCtrl.tempSelectedDate" для ngModel в Date Picker.

Затем используйте событие ngBlur (https://docs.angularjs.org/api/ng/directive/ngBlur), чтобы обновить реальное свойство, т.е. комплект calendarCtrl.ngModel = calendarCtrl.tempSelectedDate.

Кроме того, в то время как ничто не останавливает вас при использовании свойства области calendarCtrl.ngModel в ngModel, код будет легче читать, если вы используете более значимые имена, такие как ng-model="calendarCtrl.dateSelected".

Работает демо-версия http://plnkr.co/edit/90mDPqzadjPt09Tp4SlI?p=preview.

я раздвоенный и расширил чужой Datepicker plnkr с двумя изменениями: добавление ng-blur="blurDate = startDate" к <input> & отображения значения с Blur Date: {{ blurDate }}.

+0

Я добавил пример plnkr –

+0

В моем случае ng-blur получает вызов каждый раз, когда я нажимаю на вход, потому что всплывающее окно вызывает размытие. В моей функции размытия я устанавливаю ngModelController на $ dirty, который затем вызывает проверку любых ошибок. Я в конечном итоге решаю его, прослушивая keydown на элементе ввода и устанавливая вход обратно в $ netist. И затем, когда пользователь либо нажимает всплывающее окно календаря, либо размывает ввод, щелкая в нажатом состоянии, форма возвращается в значение $ dirty и ищет ошибки проверки. Решение Hacky, но на основе уже существующего кода кажется единственным вариантом. – techer

Смежные вопросы