keeping modelvalue while changing viewvalue using formatters

Viewed 220

I have a textbox, and would like to show user input as * while they are typing, and save the input as normal example. 123456789 -> ***_***_***

Given an input field like this:

<input class="form-control" type="text"  name="secretNumber" 
ng-model="vm.report.fields.secretNumber" hr-secret-number/>

Given a directive like this:

module app.directives {
    'use strict';

    class SecretNumber implements ng.IDirective {
        require = 'ngModel';
        restrict = 'A';

        formatSsn = (secret: string): string  => {
            return secret.replace(/[0-9]/g, '*');
        };

        link = ($scope, $element, $attrs, $ngModel: ng.INgModelController) => {
            var onModelChanged = () => {
                $ngModel.$setViewValue(this.formatSsn($ngModel.$modelValue));
                $ngModel.$render();
                console.log($ngModel);
            };

            $ngModel.$viewChangeListeners.push(onModelChanged);

            $ngModel.$formatters.push((value) => {
                return this.formatSsn($ngModel.$modelValue);
            });

            if (!$attrs['hrAllowRegex'] || !$attrs['maxlength'] || !$attrs['ngMinlength']) {
                $attrs.$set('hr-allow-regex', '[0-9]');
                $attrs.$set('maxlength', 14);
                $attrs.$set('ngMinlength', 14);
            }
        };


        static factory():ng.IDirectiveFactory {
            var directiveFactory:ng.IDirectiveFactory = () => new SecretNumber();

            return directiveFactory;
        };
    }

    angular.module('app').directive('hrSecretNumber', SecretNumber.factory());
}

How can I keep the modelvalue while modifying viewvalue, so in the textbox it will show **** while I can save in database as 1234 for example.

The result of console.log look like this

NgModelController {$viewValue: "****", $modelValue: "****", $$rawModelValue: "****", $validators: Object, $asyncValidators: Object…}

instead of

NgModelController {$viewValue: "****", $modelValue: "1234", $$rawModelValue: "1234", $validators: Object, $asyncValidators: Object…}
0 Answers
Related