Javascript 三个相关字段的角度形式内联验证未正确显示错误

为客户销售商品时，有关于如何设定价格的指导原则，基本上包括三个要素：

最低价格-它可以卖的最低价格

首选-客户希望我们出售的价格

最高-它可以卖的最高价格

我用三个字段定义了一个角度表单，在模型更改时进行验证（我还使用ng模型选项=“{allowInvalid:true}”），但错误显示不正确：

初始设置：

Minimum                    Preferred                   Maximum
10                         20                          30

将最小值更改为101（失焦时）：

更改为201正确给出（失焦时）：

将最大值更改为301（失焦时）：

可以输入许多配置，导致显示错误消息

我希望它能在字段出错时显示一个错误，在字段出错时清除它

我还注意到，在控件失去焦点之前不会显示错误，然后在用户与控件或任何其他控件交互时显示错误。为什么控件必须在显示错误之前失去焦点

这最好通过玩plunker来证明：

验证方法如下所示：

vm.fields = [
              {
            className: "panel-body",
            fieldGroup: [
                {
                    className: "form-row row",
                    fieldGroup: [
                        {
                            key: 'MinimumPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Minimum',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        var isValid = viewValue <= scope.model.PreferredPrice;
                                        return isValid;
                                    },
                                    message: '"Cannot be greater than preferred"'
                                }
                            }
                        },
                        {
                            key: 'PreferredPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Preferred',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        if (viewValue < scope.model.MinimumPrice) return false;
                                        if (viewValue > scope.model.MaximumPrice) return false;
                                        return true;
                                    },
                                    message: '"Cannot be less than minimum or greater than maximum"'
                                }
                            }
                        },
                        {
                            key: 'MaximumPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Maximum',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        return viewValue >= scope.model.PreferredPrice;
                                    },
                                    message: '"Cannot be less than preferred"'
                                }
                            }
                        }
                    ]
                }
            ]
        }];

vm.fields=[
{
类名：“面板主体”，
现场组：[
{
类名：“表单行”，
现场组：[
{
关键词：“最低价格”，
类名：“col-xs-3”，
键入：“输入”，
模板选项：{
标签：“最小值”，
要求：正确，
最大长度：3，
最小长度：1
},
额外费用：{
validateOnModelChange:true
},
验证器：{
价格：{
表达式：函数validatePrice（$viewValue、$modelValue、scope）{
var viewValue=parseInt（$viewValue，10）；
var isValid=viewValue scope.model.MaximumPrice）返回false；
返回true；
},
消息：''不能小于最小值或大于最大值''
}
}
},
{
关键字：“MaximumPrice”，
类名：“col-xs-3”，
键入：“输入”，
模板选项：{
标签：“最大值”，
要求：正确，
最大长度：3，
最小长度：1
},
额外费用：{
validateOnModelChange:true
},
验证器：{
价格：{
表达式：函数validatePrice（$viewValue、$modelValue、scope）{
var viewValue=parseInt（$viewValue，10）；
返回viewValue>=scope.model.PreferredPrice；
},
消息：“'不能小于首选值”'
}
}
}
]
}
]
}];

失焦时不会抛出错误？是的，失焦时会抛出错误，但当字段不再无效时不会清除错误。奇怪的是，在某些情况下它确实清除了错误，在某些尝试中它没有。失焦时，它不会抛出错误？是的，它会在失去焦点时抛出错误，但在字段不再无效时不会清除错误。奇怪的是，在某些情况下它确实清除了错误，在某些尝试中它没有。

Minimum                    Preferred                   Maximum
101                        201                         30
                           Cannot be less than
                           minimum or greater
                           than maximum

Minimum                    Preferred                   Maximum
101                        201                         301
                           Cannot be less than
                           minimum or greater
                           than maximum

vm.fields = [
              {
            className: "panel-body",
            fieldGroup: [
                {
                    className: "form-row row",
                    fieldGroup: [
                        {
                            key: 'MinimumPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Minimum',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        var isValid = viewValue <= scope.model.PreferredPrice;
                                        return isValid;
                                    },
                                    message: '"Cannot be greater than preferred"'
                                }
                            }
                        },
                        {
                            key: 'PreferredPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Preferred',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        if (viewValue < scope.model.MinimumPrice) return false;
                                        if (viewValue > scope.model.MaximumPrice) return false;
                                        return true;
                                    },
                                    message: '"Cannot be less than minimum or greater than maximum"'
                                }
                            }
                        },
                        {
                            key: 'MaximumPrice',
                            className: "col-xs-3",
                            type: 'input',
                            templateOptions: {
                                label: 'Maximum',
                                required: true,
                                maxlength: 3,
                                minlength: 1
                            },
                            extras: {
                                validateOnModelChange: true
                            },
                            validators: {
                                Price: {
                                    expression: function validatePrice($viewValue, $modelValue, scope) {
                                        var viewValue = parseInt($viewValue, 10);
                                        return viewValue >= scope.model.PreferredPrice;
                                    },
                                    message: '"Cannot be less than preferred"'
                                }
                            }
                        }
                    ]
                }
            ]
        }];