Как я могу переопределить Angular фильтрацию недопустимых значений формы, заставляя Angular сохранять $viewValue в $modelValue?

Ответ 1

Следующее решение может использоваться с Angular версии 1.3:

Вы можете установить ng-model-options="{ allowInvalid: true }" в поле ввода модели, где вы хотите сохранить недопустимые атрибуты.

allowInvalid: логическое значение, указывающее, что модель может быть установлена со значениями, которые не корректно проверялись, а не по умолчанию поведение установки модели на undefined

https://docs.angularjs.org/api/ng/directive/ngModelOptions

Затем, когда вы готовы показать пользователю свои ошибки проверки, вы можете сделать это по-своему. Не забудьте указать свои входы и формы name, чтобы вы могли ссылаться на них в своей области.

например. if($scope.myFormName.my_input_name.$invalid) { ... }

Соответствующий учебник: http://blog.thoughtram.io/angularjs/2014/10/19/exploring-angular-1.3-ng-model-options.html

Ответ 2

Эмиль ван Гален имеет сообщение в блоге, которое охватывает именно эту проблему. Я использовал свою директиву, которая работает отлично.

Как он указывает, массив $parsers из NgModelController:

Массив функций для выполнения, как конвейер, всякий раз, когда элемент управления считывает значение из DOM. Каждая функция называется, в свою очередь, передавая значение до следующего. Используется для дезинфекции/преобразования значения, а также для проверки. Для проверки синтаксические анализаторы должны обновить состояние действительности с помощью $setValidity() и вернуть undefined для недопустимых значений.

Итак, чтобы модель была обновлена ​​до недопустимого значения, но сохраните результаты проверки, создайте директиву, которая не возвращает undefined для недопустимых значений. Например, директива Emil возвращает недействительные строковые значения undefined в значение модели, в противном случае оно возвращает значение вида:

angular.module('jdFixInvalidValueFormatting', [])
.directive('input', function() {
    return {
        require: '?ngModel',
        restrict: 'E',
        link: function($scope, $element, $attrs, ngModelController) {
            var inputType = angular.lowercase($attrs.type);

            if (!ngModelController || inputType === 'radio' ||
                    inputType === 'checkbox') {
                return;
            }

            ngModelController.$formatters.unshift(function(value) {
                if (ngModelController.$invalid && angular.isUndefined(value)
                        && typeof ngModelController.$modelValue === 'string') {
                    return ngModelController.$modelValue;
                } else {
                    return value;
                }
           });
       }
    };
});

Вы можете видеть, как он работает в своем Plunker (также обратите внимание на его улучшенную обработку null, а не undefined): http://plnkr.co/edit/gist:6674554?p=preview

Ответ 3

Я сделал удар, чтобы сделать это. Основная идея заключается в том, чтобы обновить модель независимо от того, действителен ли вход, захватывая текст сразу с элемента ввода. Затем, обновив представление $render с данными модели, даже если представление undefined. Я не получил это, чтобы изменить стиль при загрузке с плохими данными. Я уверен, что это просто вызов $setViewValue() с чем-то недопустимым, а затем обновление элемента.

Это не ужасно angular способ сделать что-то. Если вам нужна неверная версия формы, я мог бы использовать директиву для соединения think my-model-no-validation="myDirtyModel.value", но это задача для другого дня.

Вот скрипка: http://jsfiddle.net/fooby12/dqPbz/

Сокращенный код для директивы:

angular.module('bindApp', []).
controller('bindToViewCtrl', function($scope) {
    $scope.zip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
    $scope.formData = {
        zip: '1234',
        bindToView: true
    };
}).
directive('bindToView', function($log) {
    return {
        require: 'ngModel',
        scope: {bindToViewIsOn: '&bindToView', ngModel: '='},
        link: function (scope, iElem, iAttr, ngModel) {
            if(!ngModel) return;    

            ngModel.$render = function() {
                iElem[0].value = ngModel.$viewValue || ngModel.$modelValue;  
            };

            iElem.on('blur keyup change', function() {
                scope.$apply(updateModel);
            });

            scope.$watch(function() { return scope.bindToViewIsOn(); }, function() {
                updateModel();
            });

            function updateModel(){
                if(scope.bindToViewIsOn()){  
                    scope.ngModel = iElem[0].value;
                }
            }
        }
    };
});

Пример HTML:

<div ng-app="bindApp" ng-controller="bindToViewCtrl">
    <form name="bindForm">
        <label> Zip Code
            <input type="text" ng-pattern="zip" required ng-model="formData.zip" bind-to-view="formData.bindToView" name="zipCode"/>
        </label>
        <span>$scope.formData.zip: {{formData.zip}}</span>
        <br/>
        <button ng-click="formData.bindToView = !formData.bindToView">
            Bind to View is {{formData.bindToView ? 'On' : 'Off' }}
        </button> 
    </form>
</div>

Ответ 4

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

 if (!self.editForm.$valid && self.editForm.txtCustomer.$invalid) {//workaround to fix typeahead validation issue.
                self.editForm.txtCustomer.$setValidity('editable', true);
            }