不要使用 ng-model 记录无效值答案

【问题标题】：Don't record invalid values with ng-model不要使用 ng-model 记录无效值
【发布时间】：2013-09-07 18:21:48
【问题描述】：

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

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

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

到这里：

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

它似乎完全符合我的要求，但我不知道如何以正确的方式做到这一点。改变这种行为的正确方法是什么？还是因为某种原因我的尝试注定要失败？

更新：添加示例。

例如看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>

还有 JS：

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

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

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

我相信 AnugularJS 验证器的默认行为是在传递的值无效时不更新模型。如果您查看developer guide 并查看Custom Validation，这些示例还表明模型未更新或因 UI 中提供的无效值而被清除

【讨论】：

是的，抱歉，我添加了一个示例。我不希望该字段为空，我希望它保持有效值。
你是对的。它不会改变模型，它也不会在 UI 的其他地方显示我没想到/想要的无效模型值。

【解决方案2】：

正如 Chandermani 所说，这是默认行为，这里有一个例子来展示它：

<form name="myform">
    <input type="text" name="myinput" ng-model="myvalue" ng-minlength="4" required>
</form>

Is the input valid ? {{ myform.myinput.$valid }} <br />
Input's value : {{ myvalue }}

{{ myvalue }} 在您输入至少 4 个字符之前不会显示任何内容。

最好的问候。

编辑

如果您需要默认值，我想您可以使用计算值将您的值分解为 2 个值：

   var validNumber = 15;
    $scope.validNumber = function () {
        if ($scope.myform.myNumber.$valid) return $scope.myNumber;
        else return validNumber;
    };

我在这里设置了一个例子：http://jsfiddle.net/7vtew/1/

【讨论】：

是的，抱歉，我添加了一个示例。我不希望该字段为空，我希望它保持有效值。
我测试了你的例子。当字段中键入的值无效时，模型值变为 ''（空字符串），这很麻烦，因为根据 myinputs 验证约束，'' 也不是有效值。 jsfiddle.net/yU3Zv
如果您需要默认值，我使用可能的解决方案进行了编辑。谢谢。
@Prezbar，你认为有没有一种方法可以在没有表单元素的情况下访问有效性标志 ($valid)？

【解决方案3】：

这是默认行为，但是，您可以使用 ngModelOptions 指令修改它

<input 
    type="number"
    ng-model="validNumber"
    required
    min="10"
    max="20" 
    ng-model-options="{ allowInvalid: true }"
    />

文档：https://docs.angularjs.org/api/ng/directive/ngModelOptions 请参阅“模型更新和验证”部分

【讨论】：