Mask problem?

Question

JavaScript

There is a directive

app.directive('myMask', function($timeout, $rootScope) {
    var directive = {
        restrict: 'AEC',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModelCtrl) {
            var isWithAutoUnMask = true;
            isWithAutoUnMask = !attrs.hasOwnProperty('withoutunmask');

            var maskFF = attrs.myMask;
            if (maskFF) {
                $timeout(function() {
                        $(element).inputmask({
                            mask: maskFF,
                            autoUnmask: isWithAutoUnMask,
                            showMaskOnFocus: true,
                            placeholder: " ",
                            definitions: {
                                '*': {
                                    validator: "[0-9]",
                                    cardinality: 1,
                                    casing: "lower",
                                    placeholder: "_"
                                },
                                'd': {
                                    validator: "[0-9]",
                                    cardinality: 1,
                                    casing: "lower",
                                    placeholder: " "
                                }
                            }
                        }).on('keyup paste', function() {
                            if ($(element).inputmask("isComplete")) {
                                ngModelCtrl.$setValidity('isComplete', true)
                            } else {
                                ngModelCtrl.$setValidity('isComplete', false)
                            }
                            var clearValue = $(element).val()
                            ngModelCtrl.$setViewValue(clearValue);
                            ngModelCtrl.$render();
                        })
                }, 10);
            }
        }
    }
    return directive
});

there is an input line

<input class="form-field" id="id_phone" ng-model="loginForm.loginPhone" my-mask="+7 (ddd) ddd dd dd"  name="phone" placeholder="телефон" type="text" focus_onend />

If I enter the phone number 9281234567 from the keyboard - everything is ok. Intuitively, after +7, we type the code, then the phone number
. ) 812 34 56, in the model I get 7928123456
What can I do so that the number is both dialed and inserted correctly?

Answer 1

Strange implementation of the mask. Perhaps it is worth using something not from jQuery? Like ng-mask? Well, in general, in general, you can try to hang another input, change :-)