angular-ui / ui-mask

Mask on an input field so the user can only type pre-determined pattern
https://htmlpreview.github.io/?https://github.com/angular-ui/ui-mask/master/demo/index.html
MIT License
391 stars 258 forks source link

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

Open peresbruno opened 7 years ago

peresbruno commented 7 years ago

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

firestar300 commented 7 years ago

Same problem here with a birthDate field.

peresbruno commented 7 years ago

@firestar300 some workaround?

firestar300 commented 7 years ago

Yes I changed my Regex expression to allow my birthdate value with this format : DD/MM/YYYY and this format : DDMMYYYY and it works as expected.