不要用 ng-model 记录无效值 [英] Don't record invalid values with ng-model

问题描述

我真的很喜欢 ng-model 属性如何直接绑定到我的模型，用户可以立即获得关于他们更改的反馈.对于我的用例来说，这是完美的.但是，我不希望将无效值放入模型中，这样它们就可以将扳手投入计算.我以某种方式希望模型仅在表单控件中的值有效时才更新.对于无效值，在模型值保持不变的情况下，控制值发生变化是可以的.

如果我更改了 angular (1.2rc) NgModelController 的 $setViewValue 实现的来源:

this.$setViewValue = function(value) {...if (this.$modelValue !== value) {this.$modelValue = 价值；...}};

为此:

this.$setViewValue = function(value) {...if (this.$modelValue !== value && this.$valid) {this.$modelValue = 价值；...}};

它似乎完全符合我的要求，但是我不知道如何以正确的方式执行此操作.改变这种行为的正确方法是什么?还是我的尝试因某种原因注定要失败?

更新:添加了示例.

例如查看http://jsfiddle.net/FJvgK/1/ HTML:

{{validNumber}}<表格><输入类型=数字"ng-model="validNumber"必需的分钟=10"最大=20"/></表单>

还有 JS:

var myApp = angular.module('myApp',[]);函数 MyCtrl($scope) {$scope.validNumber = 15;}

对于 10 到 20 之间的值，数字可以正确显示，但我希望这样，如果您突然在框中键入8"，或删除第二个数字而留下1"，最后一个有效数字仍会显示在上方.也就是说，模型总是有一个有效值，即使控件没有.

解决方案

我相信 AnugularJS 验证器的默认行为是如果传递的值无效，则不会更新模型.如果您查看 开发人员指南 并通过 Custom Validation 这些示例还显示模型未更新或因 UI 中提供的无效值而被清除

I really like how the ng-model attribute binds directly to my model and users get instant feedback on their changes. For my use case that's perfect. However, I don't want invalid values to be put into the model where they can throw a wrench into the calculations. I somehow want the model to only be updated if the value in the form control is valid. For invalid values, it's fine for the control value to change while the model value stays fixed.

If I change the source of angular (1.2rc) NgModelController's $setViewValue implementation:

this.$setViewValue = function(value) {
...
  if (this.$modelValue !== value) {
    this.$modelValue = value;
    ...
  }
};

To this:

this.$setViewValue = function(value) {
...
  if (this.$modelValue !== value && this.$valid) {
    this.$modelValue = value;
    ...
  }
};

It seems to do exactly what I want, however I don't know how to do this in a proper way. What's the right way to change this behavior? Or are my attempts doomed to failure for some reason?

Update: Added example.

For example look at http://jsfiddle.net/FJvgK/1/ HTML:

<div ng-controller="MyCtrl">
    {{validNumber}}
    <form>
        <input 
            type="number"
            ng-model="validNumber"
            required
            min="10"
            max="20" 
        />
    </form>
</div>

And the JS:

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.validNumber = 15;
}

The number shows properly for values between 10 and 20, but I want it so that if you suddenly type '8' into the box, or delete the second digit leaving '1' the last valid number still shows above. That is, the model always has a valid value, even if the control does not.

解决方案

I believe the default behaviour of AnugularJS validators are not to update the model if the value passed is invalid. If you look at the developer guide and go through Custom Validation these samples also show that the model is not update or is cleared on invalid value provided in the UI

这篇关于不要用 ng-model 记录无效值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！