8

我真的很喜欢 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”，最后一个有效数字仍会显示在上方。也就是说，模型始终具有有效值，即使控件没有。

4

3 回答 3

9

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

于 2013-09-07T18:55:02.193 回答
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/

于 2013-09-07T20:14:01.317 回答
2

这是默认行为，但是，您可以使用 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请参阅“模型更新和验证”部分

于 2017-09-27T09:02:15.403 回答