ui-mask
ui-mask copied to clipboard
Is not possible to identify when a new mask is applied?
Hello,
I have an input with this definition:
<input name="{{config.id}}" type="tel" ui-mask="{{mask}}" ng-pattern="pattern" ui-mask-placeholder-char="space" ng-model="ngModel" ng-required="config.required" model-view-value="true" ng-blur="blur();" ng-change="change();" ng-model-options="{ allowInvalid : true }" ui-options="{ allowInvalidValue : true, addDefaultPlaceholder : false }" >
This input need accepts values like (99)9999-9999 and (99)99999-9999.
Inside change()
function the mask
and pattern
variables are changed according the quantity of digits in ngModel. This works fine. My problem is that the validation is fired before the mask is applied to input value. For this reason my input is considered invalid. For example:
Step 1 (Input is valid)
$scope.mask = '(99)9999-9999?9';
$scope.pattern = ^\(\d{2}\)\d{4}-\d{4}(\s)?$;
input value = "(11)1111-1111 "
Step 2 (I type a 5, pattern and mask values are changed. Validations are fired and the input is considered invalid because the mask is not applied.)
$scope.mask = '(99)99999-9999';
$scope.pattern = ^\(\d{2}\)\d{5}-\d{4}$;
input value = "(11)1111-11115"
Step 3 (The new mask is applied. However, the input remains invalid because validations are not fired again.)
$scope.mask = '(99)99999-9999';
$scope.pattern = ^\(\d{2}\)\d{5}-\d{4}$;
input value = "(11)11111-1115"
Is there a way to identify when the mask is applied to input? Is there another way (best, maybe) to achieve this goal?
Thanks! :)