Question

我有一个带有模式的邮件字段：

pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$"

以及在同一字段中使用ngModel的指令：

   <input pattern="^(([^<>()\[\]\.,;:\s@\']+(\.[^<>()\[\]\.,;:\s@\']+)*)|(\'.+\'))@(([^<>()[\]\.,;:\s@\']+\.)+[^<>()[\]\.,;:\s@\']{2,})$" 
                        dir= "ltr"
                        class="form-control sgn-rounded_textbox" 
                        name="emailBox1" 
                        type="email" 
                        ng-model="vm.model.emails.emailField"
                        input-change = vm.mail>

inputChange指令：

    (function () {
        function inputChange($log, $timeout, $q, appCmdService) {

            return {
                restrict: 'A',
                require: 'ngModel',
                scope: {
                    inputChange: '='
                },
                link: function (scope, element, attrs, ngModel) {
                    var el = element[0];

                    if (checkForENSettings(scope)) {

                        if (ngModel) { // Don't do anything unless we have a model
                            ngModel.$parsers.push(function (value) {
                                if(value){
                                    //some logic to change the value....
                                    ngModel.$setViewValue(value);
                                    // renders the input with the new viewValue
                                    ngModel.$render();
                                    //set cusor position
                                    el.setSelectionRange(start, end);
                                    //$log.log('ngModel.$parsers newVal', value);
                                    return value;
                                }
                            });
                            ngModel.$formatters.push(function (value) {

                                ngModel.$setViewValue(value);
                                // renders the input with the new viewValue
                                ngModel.$render();

                                return value;
                            });
                        }

                    }

                    function checkForENSettings(scope){
                        if(scope.inputChange && scope.inputChange.lang === 'en'){
                            return true;
                        }
                    }

                }
            };     
}
        angular.module('common').directive('inputChange', inputChange);

    })();

input-change适用于没有pattern的任何字段，但在合并它们时我会得到

Cannot assign to read only property 'message' of object '[object DOMException]'

由

提供

Error: [$rootScope:inprog] $digest already in progress

有没有办法在ngModel字段上使用pattern和input？

感谢。

Answer 1

事实证明HTML5 input type="email"存在问题，并且已知问题元素selectionStart或selectionEnd已知问题 - HTML5 input email ans selection

删除type="email"解决。

Answer 2

你看过ng-pattern和ng-modal-options吗？

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

角度 - 模式和ng-模型误差

2 个答案: