ui-mask icon indicating copy to clipboard operation
ui-mask copied to clipboard

Is not possible to identify when a new mask is applied?

Open peresbruno opened this issue 7 years ago • 3 comments

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! :)

peresbruno avatar Mar 31 '17 14:03 peresbruno