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…}