Add unsafe option (#149)

* Add `allowInvalidValue` option

* Add test of 'allowInvalidValue'

Author: Disorrder

README.md

@@ -67,6 +67,7 @@ Inside of `ui-options`, you can customize these five properties:
 * `eventsToHandle` - default: `['input', 'keyup', 'click', 'focus']`
 * `addDefaultPlaceholder` - default: `true`
 * `escChar` - default: `'\\'`
+* `unsafe` - default: `false`
 
 When customizing `eventsToHandle`, `clearOnBlur`, or `addDefaultPlaceholder`, the value you supply will replace the default. To customize `eventsToHandle`, be sure to replace the entire array.
 
@@ -76,6 +77,8 @@ When setting `clearOnBlurPlaceholder` to `true`, it will show the placeholder te
 
 If the `escChar` (\\ by default) is encountered in a mask, the next character will be treated as a literal and not a mask definition key.  To disable the `escChar` feature completely, set `escChar` to `null`.
 
+When `unsafe` set to true, apply value to `$modelValue` even if it isn't valid. By default, if you write invalid value, model stay `undefined`.
+
 #### Global customization
 In addition to customizing behaviors for a specific element, you can also customize the behaviors globally. To do this, simply use the `uiMaskConfig` provider in your app configuration. Example:
 

src/mask.js

@@ -32,6 +32,9 @@ angular.module('ui.mask', [])
             this.addDefaultPlaceholder = function(addDefaultPlaceholder) {
                 return options.addDefaultPlaceholder = addDefaultPlaceholder;
             };
+            this.allowInvalidValue = function(allowInvalidValue) {
+                return options.allowInvalidValue = allowInvalidValue;
+            };
             this.$get = ['uiMaskConfig', function(uiMaskConfig) {
                 var tempOptions = uiMaskConfig;
                 for(var prop in options) {
@@ -122,14 +125,27 @@ angular.module('ui.mask', [])
                                 }
                             });
 
+                            iAttrs.$observe('allowInvalidValue', function(val) {
+                                linkOptions.allowInvalidValue = val === ''
+                                    ? true
+                                    : !!val;
+                                formatter(controller.$modelValue);
+                            });
+
                             function formatter(fromModelValue) {
                                 if (!maskProcessed) {
                                     return fromModelValue;
                                 }
                                 value = unmaskValue(fromModelValue || '');
                                 isValid = validateValue(value);
                                 controller.$setValidity('mask', isValid);
-                                return isValid && value.length ? maskValue(value) : undefined;
+
+                                if (!value.length) return undefined;
+                                if (isValid || linkOptions.allowInvalidValue) {
+                                    return maskValue(value);
+                                } else {
+                                    return undefined;
+                                }
                             }
 
                             function parser(fromViewValue) {
@@ -144,8 +160,11 @@ angular.module('ui.mask', [])
                                 // to be out-of-sync with what the controller's $viewValue is set to.
                                 controller.$viewValue = value.length ? maskValue(value) : '';
                                 controller.$setValidity('mask', isValid);
-                                if (isValid) {
-                                    return modelViewValue ? controller.$viewValue : value;
+
+                                if (modelViewValue) value = controller.$viewValue;
+                                if (!value.length) return undefined;
+                                if (isValid || linkOptions.allowInvalidValue) {
+                                    return value;
                                 } else {
                                     return undefined;
                                 }

test/maskSpec.js

@@ -280,6 +280,22 @@ describe("uiMask", function () {
         input.val("811").triggerHandler("input");
         expect(input.val()).toBe("81.1_.__-___.__");
     });
+
+    it("should set the model value properly even if it's not full", function() {
+      var input1 = compileElement('<input ui-mask="{{mask}}" ng-model="x" allow-invalid-value/>');
+      var input2 = compileElement('<input ui-mask="{{mask}}" ng-model="x" ui-options="{allowInvalidValue: true}"/>');
+      scope.$apply("mask = '9999'");
+
+      input1.val('11').triggerHandler("change");
+      expect(scope.x).toBe("11");
+
+      input2.val('22').triggerHandler("change");
+      expect(scope.x).toBe("22");
+
+      scope.$apply("x = '33'");
+      expect(input1.val()).toBe("33__");
+      expect(input2.val()).toBe("33__");
+    });
   });
 
   describe("verify change is called", function () {