Как использовать последнее допустимое значение модели, если модель становится недействительной?

Я создал простую директиву, которая служит оболочкой для директивы ng-model и всегда будет поддерживать последнее допустимое значение модели. Он называется valid-ng-model и должен заменить использование ng-model в тех местах, где вы хотите иметь последнее допустимое значение.

Я создал пример использования здесь, надеюсь, он вам понравится. Любые идеи по улучшению приветствуются.

Это код реализации директивы valid-ng-model.

app.directive('validNgModel', function ($compile) {
  return {
      terminal: true,
      priority: 1000,
      scope: {
        validNgModel: '=validNgModel'
      },
      link: function link(scope, element, attrs) {

        // NOTE: add ngModel directive with custom model defined on the isolate scope
        scope.customNgModel = angular.copy(scope.validNgModel);
        element.attr('ng-model', 'customNgModel'); 
        element.removeAttr('valid-ng-model');

        // NOTE: recompile the element without this directive
        var compiledElement = $compile(element)(scope);
        var ngModelCtrl = compiledElement.controller('ngModel');

        // NOTE: Synchronizing (inner ngModel -> outside valid model)
        scope.$watch('customNgModel', function (newModelValue) {
          if (ngModelCtrl.$valid) {
            scope.validNgModel = newModelValue;
          }
        });

        // NOTE: Synchronizing (outside model -> inner ngModel)
        scope.$watch('validNgModel', function (newOutsideModelValue) {
          scope.customNgModel = newOutsideModelValue;
        });
      }
    };
});

Изменить: реализация директивы без изолированной области: Plunker.

Поскольку вы отправляете весь объект для каждой модификации поля, вам нужно где-то сохранить последнее допустимое состояние этого всего объекта. Вариант использования, который я имею в виду:

1. У вас есть допустимый объект { name: 'Valid', email: 'Valid' }.
2. Вы меняете имя на недействительное; директива autosave, размещенная при вводе имени, знает свое собственное последнее действительное значение, поэтому отправляется правильный объект.
3. Вы также меняете адрес электронной почты на недействительный. Директива autosave, размещенная при вводе электронной почты, знает свое собственное последнее действительное значение, но НЕ имя. Если последние известные хорошие значения не централизованы, будет отправлен объект типа { name: 'inalid', email: 'Valid' }.

Итак, предложение:

1. Сохраняйте очищенную копию объекта, который вы редактируете. Под санацией я подразумеваю, что любые недопустимые начальные значения должны быть заменены допустимыми нетронутыми (например, нулями, нулями и т. д.). Выставьте эту копию в качестве члена контроллера, например. fooCtrl.lastKnowngood.

2. Сообщите autosave последнее известное хорошее состояние, например. в виде:

   <input ng-model="fooCtrl.email" autosave="fooCtrl.lastKnowngood" required />
   

3. Сохраните последнее известное хорошее локальное значение в этом объекте; используйте выражение ng-model, например. в виде:

   var lastKnownGoodExpr = $parse(attrs.autosave);
   var modelExpr = $parse(attrs.ngModel);
   
   function saveIfModelChanged () {
       var lastKnownGood = lastKnownGoodExpr(scope);
   
       if (ngModel.$valid) {
           // trick here; explanation later
           modelExpr.assign({fooCtrl: lastKnownGood}, ngModel.$modelValue);
       }
   
       // send the lastKnownGood object to the server!!!
   }
   

4. Отправьте объект lastKnownGood.

Хитрость, ее недостатки и способы ее улучшения: при установке значения локальной модели для объекта lastKnownGood вы используете объект контекста, отличный от текущей области; этот объект предполагает, что контроллер называется fooCtrl (см. строку modelExpr.assign({fooCtrl: lastKnownGood}, ...)). Если вам нужна более общая директива, вы можете передать корень как другой атрибут, например:

<input ng-model="fooCtrl.email" autosave="fooCtrl.lastKnowngood" required
    autosave-fake-root="fooCtrl" />

Вы также можете самостоятельно проанализировать выражение ng-model, чтобы определить первый компонент, например. подстрока 0 1-е появление точки (опять же упрощенно).

Другой недостаток заключается в том, как вы обрабатываете более сложные пути (в общем случае), например. fooCtrl.persons[13].address['home'].street - но, похоже, это не ваш вариант использования.

Кстати, это:

ngModel.$viewChangeListeners.push(function () {
    saveIfModelChanged();
});

можно упростить так:

ngModel.$viewChangeListeners.push(saveIfModelChanged);

Валидаторы Angular по умолчанию будут присваивать значение модели только в том случае, если ее действительный адрес электронной почты. Чтобы преодолеть это, вам нужно будет переопределить валидаторы по умолчанию.

Для получения дополнительной информации см.: https://docs.angularjs.org/guide/forms#modifying-built-in-validators

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

Я создал небольшую демонстрацию для проверки электронной почты, но вы можете расширить ее, чтобы охватить все остальные валидаторы.

Вот скрипка: http://plnkr.co/edit/EwuyRI5uGlrGfyGxOibl?p=preview