HTML輸入最大長度使文本區域為0

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

檢查ng-model-options allow-invalid。

如果模型無效，除非您指定allow-invalid，否則它將為空。

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