格式化和验证表单 AngularJS 1.4

Question

我正在使用 angularjs 构建一个表单，其中有一个金额字段。

我想验证金额并设置格式，限制无效金额，只输入有效金额，其余全部丢弃。有效金额为：

1.23 0.99

所以，基本上，1 位数字后跟 2 个小数点。

我对在过滤器或指令之间使用感到困惑，因为我从未使用过它们中的任何一个。如果有人过去做过类似的事情，如果您可以与我分享或者您可以给我解决方案，我将不胜感激。

我使用过类似 ng-pattern="/^[0-9]*\.[0-9][0-9]$/ 的 ng-pattern，但对我不起作用。

我正在使用 AngularJS 1.4 最新版本。

编辑 - 我的 DODE

    <input type="number"
  name="globalNetPrice"
  value="{{netprice.globalNetPrice}}"
  ng-model="netprice.globalNetPrice"
  class="form-control"
  required
  ng-minlength="0.01"
  ng-maxlength="999"
  ng-pattern="/^[0-9]+.[0-9][0-9]$/"
  >

<p ng-show="netpriceForm.globalNetPrice.$invalid && !netpriceForm.globalNetPrice.$pristine">

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.required">Net Price is required.</small>

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.number">That is not a Net Price. Please input a valid Net Price.</small>

<small class="error" ng-show="netpriceForm.globalNetPrice.$error.pattern">That is not a valid Net Price. Pattern not valid.</small>

</p>

Answer 1

您还为此使用指令：-

     app.directive('numberOnly', function () {
    return {
        restrict: 'A',
        require: 'ngModel',
        scope: {
            ngModel: '='
        },
        link: function (scope) {
            scope.$watch('ngModel', function (newValue, oldValue) {
                if (oldValue != undefined && oldValue.length > 0) {
                    if (newValue != undefined) {
                        if (typeof newValue == 'string') {
                            var notNumberCheck = newValue.replace(oldValue, '');
                            if (isNaN(newValue)) {
                                if (notNumberCheck != '.') {
                                    scope.ngModel = oldValue;
                                    return;
                                }
                            }
                        }
                    } else {
                        scope.ngModel = "";
                        return;
                    }
                } else {
                    if (isNaN(newValue) && newValue != '.') {
                        scope.ngModel = "";
                        return;
                    }
                }
                var arr = String(newValue).split("");
                if (arr.length === 0) return;
                if (arr.length === 1 && (arr[0] == '-' || arr[0] === '.')) return;
                if (arr.length === 2 && newValue === '-.') return;
                if (isNaN(newValue)) {
                    scope.ngModel = oldValue;
                }
            });
        }
    };
})

Answer 2

Angularjs 有currency 过滤器，您可以轻松使用它。

还要检查这个 stackoverflow question 这是工作fiddle

app.directive('currencyInput', function() {
return {
    restrict: 'A',
    scope: {
        field: '='
    },
    replace: true,
    template: '<span><input type="text" ng-model="field"></input>{{field}}</span>',
    link: function(scope, element, attrs) {

        $(element).bind('keyup', function(e) {
            var input = element.find('input');
            var inputVal = input.val();

            //clearing left side zeros
            while (scope.field.charAt(0) == '0') {
                scope.field = scope.field.substr(1);
            }

            scope.field = scope.field.replace(/[^\d.\',']/g, '');

            var point = scope.field.indexOf(".");
            if (point >= 0) {
                scope.field = scope.field.slice(0, point + 3);
            }

            var decimalSplit = scope.field.split(".");
            var intPart = decimalSplit[0];
            var decPart = decimalSplit[1];

            intPart = intPart.replace(/[^\d]/g, '');
            if (intPart.length > 3) {
                var intDiv = Math.floor(intPart.length / 3);
                while (intDiv > 0) {
                    var lastComma = intPart.indexOf(",");
                    if (lastComma < 0) {
                        lastComma = intPart.length;
                    }

                    if (lastComma - 3 > 0) {
                        intPart = intPart.splice(lastComma - 3, 0, ",");
                    }
                    intDiv--;
                }
            }

            if (decPart === undefined) {
                decPart = "";
            }
            else {
                decPart = "." + decPart;
            }
            var res = intPart + decPart;

            scope.$apply(function() {scope.field = res});

        });

    }
};

});