CODEWITHSUNDEEP
angularjs
nikjohn
nikjohn

Reputation: 21870

Input is defaulting to zero - not allowing empty value

I'm using a couple of directives on this input field:

<input valid-number  type="tel" ng-model="planBody.campaign.campaignparams.budget" currency-input=""/>

The following directive seems to be resetting empty or "" to "0" upon all types of model updates, both via user keypress and vis JavaScript:

.directive('currencyInput', function($filter, $browser) {
    return {
        require: 'ngModel',
        link: function($scope, $element, $attrs, ngModelCtrl) {
            var listener = function() {
                var value = $element.val().replace(/,/g, '');
                $element.val($filter('number')(value, false));
            };

            // This runs when we update the text field
            ngModelCtrl.$parsers.push(function(viewValue) {
                return viewValue.replace(/,/g, '');
            });

            // This runs when the model gets updated on the scope directly and keeps our view in sync
            ngModelCtrl.$render = function() {
                $element.val($filter('number')(ngModelCtrl.$viewValue, false));
            };

            $element.bind('change', listener);
            $element.bind('keydown', function(event) {
                var key = event.keyCode;
                // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing.
                // This lets us support copy and paste too
                if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)){
                  return;
                }
                $browser.defer(listener); // Have to do this or changes don't get picked up properly
            });

            $element.bind('paste cut', function() {
                $browser.defer(listener);  
            });
        }

    };
})

.directive('validNumber', function() {
  return {
    require: '?ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      if(!ngModelCtrl) {
        return; 
      }

      ngModelCtrl.$parsers.push(function(val) {
        var clean = val.replace( /[^0-9]+/g, '');
        if (val !== clean) {
          ngModelCtrl.$setViewValue(clean);
          ngModelCtrl.$render();
        }
        return clean;
      });

      element.bind('keypress', function(event) {
        if(event.keyCode === 32) {
          event.preventDefault();
        }
      });
    }
  };
})

I want to allow empty values in the input field. Which part of the directives should be changed?

Upvotes: 0

Views: 2135

Answers (1)

Kousha
Kousha

Reputation: 36219

The problem is at the very top, where you have $element.val($filter('number')(value, false)).

You are filtering the value and setting it to $element. If you filter and empty string into a number, it becomes a zero.

If you don't want that, then I suggest you do a test before the filtering:

// Check to see if value is null or empty.
// If it is, then just assign the value to be an empty string.
// Otherwise, filter the number.
// Here I am using UnderscoreJS for the null/empty check, but you can use pure javascript.
value = (_.isNull(value) || _.isEmpty(value)) ? '' : $filter('number')(value);

// Now assign the new value
$element.val(value);

Upvotes: 1

Related Questions