Question

我正在使用一个指令来处理我的html输入框中的十进制功能，以及当我输入一个超过5位数字的文本中的现有值时，我给出了输入类型数字的最大长度为5盒子变成零可以让任何人告诉我它为什么会发生或者我怎么能避免这种情况。

十进制指令：

'use strict';
angular.module('main')
    .directive('decimalpoint', function (CommonService) {
        'use strict';
        return {
            restrict: 'A',
            // require: 'ngModel',
            scope: {
                ngModel: '=ngModel'
            },
            link: function (scope, ele, attrs) {
                ele.bind('keypress keyup', function (e) {
                    console.log('keycode: ', e.keyCode);
                    var newVal = ele.val() + (e.charCode !== 0 ? String.fromCharCode(e.charCode) : '');
                    if (ele.val().search(/(.*)\.[0-9][0-9]/) === 0 && newVal.length > ele.val().length) {
                        console.log('going to preventDefault');
                        e.preventDefault();
                    }

                });

                scope.$watchCollection('ngModel', function (newValue, oldValue) {
                    console.log('newValue: ', newValue);
                    console.log('oldValue: ', oldValue);
                    if (isNaN(newValue)) {
                        scope.ngModel = oldValue;
                    } else {
                        console.log('new value is', newValue);
                        console.log('type of new value', typeof (newValue));
                        if (newValue) {
                            console.log('new value string', newValue.toString());
                            console.log('split', newValue.toString().split('.'));
                            var v = newValue.toString().split('.');
                            console.log('v', v);
                            console.log('First value', v[0]);
                            console.log('Second value', v[1]);
                            var output = v[0];
                            if (v[1]) {
                                output = output + '.' + v[1].substring(0, 2);
                                scope.ngModel = parseFloat(output);
                            } else {
                                scope.ngModel = parseFloat(output);
                            }
                        }
                    }

                });
            }
        };
    })

Html页面：

 <label class="item item-input InputFormFull" ng-if="vm.product.selectedtype !== 'piece'">
      <span class="input-label"> {{'count_message' | translate}} </span>
      <input stopccp decimalpoint ng-model="vm.product.count" maxlength="8" placeholder="0" type="number" ng-change="vm.onTotalCost()" oninput="this.value = this.value.replace(/(\..*)\./g, 0);" ng-click= "vm.hideScrollContent()" />
    </label>

    <label class="item item-input InputFormFull">
      <span class="input-label"> {{'rate_message' | translate}} </span>
      <input stopccp decimalpoint ng-model="vm.product.rate" placeholder="0" type="number" ng-change="vm.onTotalCost()" maxlength="5" ng-click= "vm.hideScrollContent()"/>
    </label>

Answer 1

检查模型选项允许无效。

如果模型无效，除非您指定allow-invalid。否则它将被取消。

https://docs.angularjs.org/api/ng/directive/ngModelOptions#model-updates-and-validation

Html输入最大长度使文本区域为0

1 个答案: