angularjs - 当输入无效时，Angular 不会在模型更改时恢复 null-but-valid 输入值

Question

我遇到了一个奇怪/令人困惑的行为<input>和表单验证。

本质上，如果输入有一个无效的数值（设置form.$valid为false），如果模型值更改为null，它会将$valid标志设置回true，但不会更改输入字段中显示的值。

我创建了一个plunker来说明。请按照以下步骤重现：

1. 将单元格的值修改为空。
2. 单击保存链接（保存null到模型中）
3. 输入一个非数字字符。
4. 单击重置null链接（从模型中恢复）
5. 观察输入字段不再无效，但无效字符仍然存在。

这是一个错误还是我做错了什么？

编辑：

我开始相信这是一个错误。我通过引入另一个强制""为null. 这是上面带有“修复”的 plunker 的一个分支。

编辑2：

这已在 v1.3+ 中修复

Answer 1

您的代码工作正常，但您忘记在 app.js 中添加验证检查

 this.save = function(){
      if($scope.mainForm.$valid && !this.get() == ""){
          old_num = num;
      }
 };

您应该仅在表单有效时保存该值。

然而，这并不是一个完整的证明解决方案，因为整个表单必须有效才能保存工作。为了进一步改进算法，我建议您标记单个模型的有效性并检查单个模型的有效性。

希望能帮助到你

Answer 2

有一个类似的问题，我首先解决了它：

form.$rollbackViewValue()或者form.field.$rollbackViewValue如果是.$invalid在执行我的任何其他重置代码之前。

在您的示例中，您可以更改为：

<button class="btn btn-link" ng-click="cellForm.$rollbackViewValue(); item[prop].reset()">reset</button>