Javascript 用于百分比输入和验证的角度指令（初始验证不起作用）

我编写了一个Angular指令来捕获模型中分数（100%=1.0）中的百分比值，但可以看到整数。它在大多数情况下都非常有效，但我不确定如何触发初始验证

例如，当用户看到表单时，默认值为零。当最小值和最大值设置为1和100时，验证不会发生

有人能告诉我如何使它以优雅的方式工作吗

Plunker链接：

导出函数PercentageInputFormatter（）{
返回{
限制：“A”，
要求：'ngModel'，
链接：函数（范围、元素、属性、vm）{
如果（虚拟机）{
var minNumber:number='min'在attrs？parseFloat（attrs.min）：number.min\u值中；
var maxNumber:number='max'在attrs？parseFloat（attrs.max）：number.max\u值中；
var allowFraction:布尔='FACTURE'在属性中？attrs.fracture=='true'：false；
vm.$parsers.push（函数（值）{
返回validatePercentage（值）；
});
vm.$formatters.push（函数（值）{
返回XpressConvertionUtils.toPercentageDisplay（值，allowFraction？2:0）；
});
函数验证百分比（值）{
如果（值）{
var valid=！isNaN（parseFloat（value））&&isFinite（value）&&parseFloat（value）>=minNumber&&parseFloat（value）找到了一个解决方案，但请随意建议更好的方法，因为我觉得这是一个解决方法，看起来不是很优雅。如果不是，希望这能帮助其他人

这一部分做到了：

var modelGetter = $parse(attrs.ngModel);
var initialValue = modelGetter(scope);
validatePercentage($filter('percentage')(initialValue, allowFraction ? 2 : 0));

完整指令代码如下：

    export function PercentageInputFormatter($parse, $filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, vm) {
            if (vm) {

                var minNumber: number = 'min' in attrs ? parseFloat(attrs.min) : Number.MIN_VALUE;
                var maxNumber: number= 'max' in attrs ? parseFloat(attrs.max) : Number.MAX_VALUE;
                var allowFraction: boolean = 'fraction' in attrs ? attrs.fraction === 'true' : false;

                var modelGetter = $parse(attrs.ngModel);
                var initialValue = modelGetter(scope);
                validatePercentage($filter('percentage')(initialValue, allowFraction ? 2 : 0));

                vm.$parsers.push(function (value) {
                    return validatePercentage(value);
                });

                vm.$formatters.push(function (value) {
                    return $filter('percentage')(value, allowFraction ? 2 : 0);
                });

                function validatePercentage(value) {
                    if (value) {
                        var valid = !isNaN(parseFloat(value)) && isFinite(value) && parseFloat(value) >= minNumber && parseFloat(value) <= maxNumber;
                        if (!allowFraction)
                            valid = valid && value.indexOf('.') == -1;

                        vm.$setValidity('percentage', valid);
                    }

                    return valid ? value / 100 : undefined;
                }
            }
        }
    };
}

导出函数PercentageInputFormatter（$parse，$filter）{
返回{
限制：“A”，
要求：'ngModel'，
链接：函数（范围、元素、属性、vm）{
如果（虚拟机）{
var minNumber:number='min'在attrs？parseFloat（attrs.min）：number.min\u值中；
var maxNumber:number='max'在attrs？parseFloat（attrs.max）：number.max\u值中；
var allowFraction:布尔='FACTURE'在属性中？attrs.fracture=='true'：false；
var modelGetter=$parse（attrs.ngModel）；
var initialValue=modelGetter（范围）；
validatePercentage（$filter（'percentage'）（初始值，allowFraction？2:0））；
vm.$parsers.push（函数（值）{
返回validatePercentage（值）；
});
vm.$formatters.push（函数（值）{
返回$filter（'percentage'）（值，allowFraction？2:0）；
});
函数验证百分比（值）{
如果（值）{
var valid=！isNaN（parseFloat（value））&&isFinite（value）&&parseFloat（value）>=minNumber&&parseFloat（value）
    export function PercentageInputFormatter($parse, $filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, vm) {
            if (vm) {

                var minNumber: number = 'min' in attrs ? parseFloat(attrs.min) : Number.MIN_VALUE;
                var maxNumber: number= 'max' in attrs ? parseFloat(attrs.max) : Number.MAX_VALUE;
                var allowFraction: boolean = 'fraction' in attrs ? attrs.fraction === 'true' : false;

                var modelGetter = $parse(attrs.ngModel);
                var initialValue = modelGetter(scope);
                validatePercentage($filter('percentage')(initialValue, allowFraction ? 2 : 0));

                vm.$parsers.push(function (value) {
                    return validatePercentage(value);
                });

                vm.$formatters.push(function (value) {
                    return $filter('percentage')(value, allowFraction ? 2 : 0);
                });

                function validatePercentage(value) {
                    if (value) {
                        var valid = !isNaN(parseFloat(value)) && isFinite(value) && parseFloat(value) >= minNumber && parseFloat(value) <= maxNumber;
                        if (!allowFraction)
                            valid = valid && value.indexOf('.') == -1;

                        vm.$setValidity('percentage', valid);
                    }

                    return valid ? value / 100 : undefined;
                }
            }
        }
    };
}