当输入无效时，Angular不会在模型更改时恢复无效但有效的输入值

Question

我遇到了<input>的奇怪/混乱行为并进行了表单验证。

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

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

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

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

修改

我开始相信这是一个错误。我＆＃34;修复＆＃34;它通过引入另一个强制"" null值的指令。 这是fork of the plunker above的＆＃34;修复＆＃34;。

EDIT2：

这已在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>