Асинхронная многополюсная проверка, работающая в состоянии "непосредственно перед", что я хочу проверить

Question

Для проекта, над которым я работаю, у меня есть очень простой диалог, чтобы добавить персонализированного сотрудника в бизнес-приложение. Сам модал ничего особенного - имя, фамилия, ОК, Отмена. Легко... правильно?

Однако одно из деловых правил заключается в том, что мы запрещаем представление дублирующих сотрудников. Для этого я применил следующую угловую директиву:

(function() {
    'use strict';

    angular.module('app').directive('checkDuplicateEmployee', ['$q', 'officesSvc', 'webDataSvc', directive]);

    function directive($q, officesSvc, webDataSvc) {
        return {
            restrict: 'A',
            require: 'ngModel',
            link: function(scope, elem, attrs, vm) {
                vm.$asyncValidators.duplicateEmployee = function (modelValue, viewValue) {
                    // Problem visible here!
                    var args = {
                        officeType: officesSvc.officeType,
                        officeName: officesSvc.selectedOffice.name,
                        firstName: scope.vm.firstName,
                        lastName: scope.vm.lastName
                    };

                    // Custom wrapper for $http.
                    return webDataSvc.get('/api/admin/DoesEmployeeExist', args)
                        .then(function(results) {
                            if (results === true)
                                deferred.reject(results);

                                return true;
                            });
                };
            }
        }
    }
})();

Проблема, с которой я сталкиваюсь, заключается в том, что когда я добавляю директиву к входу...

<input type="text" id="firstName" name="firstName"
       maxlength="35"
       ng-model="vm.firstName"
       required check-duplicate-employee />

И я что-то ввожу, состояние, которое отправляется на сервер, - это состояние непосредственно перед моим нажатием клавиши.

Field:      | vm.firstName:      
----------------------------
T           |
Te          | T
Tes         | Te
Test        | Tes

В результате я могу сделать вывод, что область действия не обновляется до тех пор, пока не будет выполнена проверка.

Вопрос: Как я могу сделать асинхронную проверку, которая работает после $scope.vm объект был обновлен? Имейте в виду, я не могу просто передать viewValue к firstName свойство в списке аргументов - у меня есть такая же проверка на входах для vm.firstName а также vm.lastName свойства!

Answer 1

По счастливой случайности, есть способ получить значения для просмотра!

Способ проверки угловых форм работает так, что он привязывает вещи к области видимости. Среди вещей, застрявших в прицеле, являются controllerAs псевдоним, но также form объект. Предполагая, что я назвал свою форму, employeeModal это означает, что я могу получить к нему доступ из link(scope) функция путем вызова scope.employeeForm,

Формы имеют свойства для каждого именованного ввода, добавленные ими (например, scope.employeeForm.firstName). И у них есть $viewValue свойство, которое позволяет вам взаимодействовать со значением представления.

Таким образом, некоторые небольшие изменения в директиве - вот что нужно. В частности, необходимо A) найти имя объекта формы, затем B) просканировать область видимости до нужного элемента. $viewValue и добавьте его в параметры удаленной проверки.

link: function(scope, elem, attrs, vm) {
    var formName = $(elme).parents('form').attr('name');

    vm.$asyncValidators.duplicateEmployee = function () {
        var args = {
            officeType: officesSvc.officeType,
            officeName: officesSvc.officeName,
            firstName: scope[formName].firstName.$viewValue,
            lastName: scope[formName].lastName.$viewValue
        };

        // Make remote validation call.
    };
}