search

uhlryk / angular-dynamic-number

Highly customizable angular directive for numbers
64 stars 32 forks source link

onchange event is not generated when thousand separator is shown #33

Open promanik opened 8 years ago

promanik commented 8 years ago

I found that when I add a directive to a form to generate an onchange event when any element changes does not work (See: https://github.com/chenop/form-on-change/blob/master/form-on-change.js). This works for angular-dynamic-number, but only if no thousands separate character is shown. For example, you can enter '999' as the text and the change event is generated, but entering '1000' does not generate the event.

I modified the example application to demonstrate the change. Whenever the change event runs it will display an entry in the console.

<!doctype html>
<html ng-app="testApp">
  <head>
    <title>My Angular App</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script data-require="angular.js@1.5.0" data-semver="1.5.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>-->
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script> -->
    <script src="./dynamic-number.js"></script>
    <script>
        angular.module("testApp", ["dynamicNumber"])
        .config(['dynamicNumberStrategyProvider', function(dynamicNumberStrategyProvider){
          dynamicNumberStrategyProvider.addStrategy('price', {
            numInt: 6,
            numFract: 4,
            numSep: '.',
            numPos: true,
            numNeg: false,
            numRound: 'round',
            numThousand: true,
            numThousandSep: ' '
          });
        }]);

        //
        // NEW CODE ADDED to generate change event for all elements in form

        angular
        .module('testApp')
        .directive("formOnChange", function($parse) {
          return {
            require: "form",
            link: function(scope, element, attrs) {
              var cb = $parse(attrs.formOnChange);
              element.on("change", function() {
                console.log('**** Form Change', scope, element)
              });
            }
          }
        });

    </script>
  </head>
  <body>
    <div class="container-fluid content">
      <div class="row">
        <div class="col-sm-10 com-sm-offset-1 col-md-8 col-md-offset-2">
          <h1>Example of angular dynamic number directive</h1>
          <form name="directiveForm" form-on-change="" class="form-horizontal" ng-init="value1 = '';value2 = '';value3 = '';value4 = '';value5 = '';value6 = '';value7 = '';value8='';value9='';value10='';value11='';value12='';value13='';">
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma</label>
              <input type="text" ng-trim=false ng-model="value1" class="form-control" awnum num-sep="," num-int=4 num-fract=2 placeholder='e.g. XXXX,XX'>
              <div>How looks model: {{value1}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator dot, tousand separator comma</label>
              <input type="text" ng-trim=false ng-model="value6" class="form-control" awnum num-sep="." num-int=8 num-fract=4 num-thousand='true' placeholder='e.g. X,XXX.XX'>
              <div>How looks model: {{value6}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma, tousand separator dot</label>
              <input type="text" ng-trim=false ng-model="value7" class="form-control" awnum num-sep="," num-int=8 num-fract=4 num-thousand='true' placeholder='e.g. X.XXX,XX'>
              <div>How looks model: {{value7}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma, tousand separator space</label>
              <input type="text" ng-trim=false ng-model="value9" class="form-control" awnum num-sep="," num-int=8 num-fract=4 num-thousand='true' num-thousand-sep="{{' '}}"  placeholder='e.g. X XXX,XX'>
              <div>How looks model: {{value9}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma, tousand separator apostrophe</label>
              <input type="text" ng-trim=false ng-model="value12" class="form-control" awnum num-sep="," num-int=8 num-fract=4 num-thousand='true' num-thousand-sep="'"  placeholder='e.g. X XXX,XX'>
              <div>How looks model: {{value12}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator dot</label>
              <input type="text" ng-trim=false ng-model="value2" class="form-control" awnum num-sep="." num-int=4 num-fract=2 placeholder="e.g. XXXX.XX">
              <div>How looks model: {{value2}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, only real numbers</label>
              <input type="text" ng-trim=false ng-model="value3" class="form-control" awnum num-int=3 num-fract=0 placeholder="e.g. XXX">
              <div>How looks model: {{value3}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be only positive, only real numbers</label>
              <input type="text" ng-trim=false ng-model="value13" class="form-control" awnum num-int=3 num-fract=0 num-neg=false placeholder="e.g. XXX">
              <div>How looks model: {{value13}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be only negative, decimal separator dot</label>
              <input type="text" ng-trim=false ng-model="value4" class="form-control" awnum num-sep="." num-int=4 num-fract=2 num-pos=false placeholder="e.g. -XXXX.XX">
              <div>How looks model: {{value4}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be only negative, decimal separator dot integer number 0</label>
              <input type="text" ng-trim=false ng-model="value5" class="form-control" awnum num-sep="." num-int=0 num-fract=2 num-pos=false placeholder="e.g. -XXXX.XX">
              <div>How looks model: {{value5}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma, prepend with $</label>
              <input type="text" ng-trim=false ng-model="value10" class="form-control" awnum num-sep="," num-int=4 num-fract=2 num-prepend="$" placeholder="e.g. XXXX,XX">
              <div>How looks model: {{value10}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Number may be positive or negative, decimal separator comma, append with &#x20AC;</label>
              <input type="text" ng-trim=false ng-model="value11" class="form-control" awnum num-sep="," num-int=4 num-fract=2 num-append="{{'&#x20AC;'}}" placeholder="e.g. XXXX,XX">
              <div>How looks model: {{value11}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">There is in use custom strategy created for prices</label>
              <input type="text" ng-trim=false ng-model="value8" class="form-control" awnum="price" placeholder="e.g. -XXXX.XX">
              <div>How looks model: {{value8}}</div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div id="dynamic-properties" class="container-fluid content">
      <div class="row">
        <div class="col-sm-10 com-sm-offset-1 col-md-8 col-md-offset-2">
          <h1>Example of angular dynamic number directive with dynamic properties</h1>
          <form name="directiveForm2" class="form-horizontal" ng-init="value = '1234.56';separator=',';integer=4;fraction=2;append='';thousand=true;">
            <div class="form-group">
              <label class="control-label">Select separator</label>
              <select class="form-control" ng-model="separator">
                <option>,</option>
                <option>.</option>
              </select>
              <div>Active separator: {{separator}}</div>
            </div>
            <div class="checkbox">
              <label>
                <input type="checkbox" ng-model='thousand'>
                is thousand separator
              </label>
              <div>Is thousand separator: {{thousand}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Select Append Character</label>
              <select class="form-control" ng-model="append">
                <option></option>
                <option>$</option>
                <option>A</option>
                <option>B</option>
                <option>C</option>
                <option>D</option>
              </select>
              <div>Active append: {{append}}</div>
            </div>
            <div class="form-group">
              <label class="control-label">Value</label>
              <input type='text' class="form-control"
                 ng-trim=false
                 ng-model='value'
                 awnum
                 num-sep="{{separator}}"
                 num-int="{{integer}}"
                 num-fract="{{fraction}}"
                 num-thousand="{{thousand}}"
                 num-thousand-sep="{{' '}}"
                 num-append="{{append}}"
              >
              <div>How looks model: {{value}}</div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="container-fluid content">
      <div class="row">
        <div class="col-sm-10 com-sm-offset-1 col-md-8 col-md-offset-2">
          <h1>Example of angular dynamic number filter</h1>
          <h3>basic</h3>
          <div class="form-group" ng-init="filter1=1234.5678">
            <div>Model value without filter:{{filter1}} </div>
            <div>Filter: {{filter1|awnum:2:',':'round'}}</div>
          </div>
          <h3>Example of angular dynamic number filter with comma separator, thousand dot separator</h3>
          <div class="form-group" ng-init="filter2=123412344553.5678">
            <div>Model value without filter:{{filter2}} </div>
            <div>Filter: {{filter2|awnum:2:',':'round':'false':'true'}}</div>
          </div>
          <h3>Example of angular dynamic number filter with comma separator, thousand space separator</h3>
          <div class="form-group" ng-init="filter3=123412344553.5678">
            <div>Model value without filter:{{filter3}} </div>
            <div>Filter: {{filter3|awnum:2:',':'round':'false':'true':' '}}</div>
          </div>
          <h3>basic number with $ currency </h3>
          <div class="form-group" ng-init="filter4=-1234.5678">
            <div>Model value without filter:{{filter4}} </div>
            <div>Filter: {{filter4|awnum:2:',':'round':'false':'false':' ':'$'}}</div>
          </div>
          <h3>basic number with &#x20AC; currency </h3>
          <div class="form-group" ng-init="filter5=1234.5678">
            <div>Model value without filter:{{filter5}} </div>
            <div>Filter: {{filter5|awnum:2:',':'round':'false':'false':' ':null:'&#x20AC;'}}</div>
          </div>
          <h3>Example of angular dynamic number filter with strategy </h3>
          <div class="form-group" ng-init="filter5=1234.5678">
            <div>Model value without filter:{{filter5}} </div>
            <div>Filter: {{filter5|awnum:'price'}}</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
uhlryk commented 8 years ago

Hi thank you for your feedback. Maybe you could prepare working version, for example in pastebin?