即使值无效，Angular 模型也会更新答案

【问题标题】：Angular Model updates even when value is invalid即使值无效，Angular 模型也会更新
【发布时间】：2016-06-13 07:20:08
【问题描述】：

我是 Angular 新手，在尝试表单验证时遇到了以下场景：

设置：我的表单中有一个“必填”字段，它绑定到一个 ng-model 并在其中有一个默认值，以及一个重置按钮。我在 para 标记中打印它的值。

问题

现在，当我从字段中删除值时，我的 para 标记会更新为 null（无值），即使该值无效也是如此。所以我的问题是，为什么我的模型值会更新，即使新值无效。
另外，当我点击重置时，该字段被重置，但表单的有效状态仍然为真，模型也没有更新。这是为什么呢？

这里是代码：http://plnkr.co/edit/fqczGwbponOW0kgs23Jn?p=preview

    <form name="testForm">
      <label>Name:</label>
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" />
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>
    <p>Hello {{yourName}}!</p>

【问题讨论】：

第二部分尝试使用这个。<input type="reset" ng-click="yourName = ''" />
@SSH 但为什么需要这样做？ Angular 将模型绑定到视图，因此视图中的任何更新都应该自动更新模型。

标签： angularjs

【解决方案1】：

这是因为 reset 超出了 Angular JS 的范围。 AngularJS 模型不知道输入值是否已使用重置更新，除非您明确告诉它。

您可以查看我对此问题的回答以供进一步参考： Angular model doesn't update when changing input programmatically

您还可以将代码修复为：

    <form name="testForm">
      <label>Name:</label>
      {{yourName}}
      <input type="text" ng-init="yourName = 'Sam'" ng-model="yourName" placeholder="Enter a name here" required>
      <input type="reset" ng-click="yourName = ''"/>
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>

【讨论】：

那么问题 1 呢？
我没有得到你的第一个问题。你的段落标签在哪里得到空值？
我的意思是，AFAIK，角度模型仅在新值有效时更新，此处文本框是必填字段，因此空白值是 invalid 所以模型不应该当您从文本框中删除文本时（通过使用退格键或 del），更新为空白。
“角度模型仅在新值有效时更新”：我认为您在这里混淆了两个不同的概念。 AngularJS 不限制基于 HTML 表单验证的无效模型值的输入。
我同意@rahul，模型会在任何有效或无效的更改中更新。只需要并且只有表单。$valid = false。你想做什么？也许我们可以用 $watch 找到解决方案

【解决方案2】：

我将在控制器中创建一个清除数据的函数：一个笨蛋http://plnkr.co/edit/YfCrTJNpYGOuNd7GgAgT?p=preview

控制器：

var app = angular.module('app', []);  
app.controller('MainCtrl', function($scope) {

  $scope.yourName = 'Sam' ;
  $scope.delete = function(){  
   $scope.yourName = null ;
 }
});

html

<body ng-controller="MainCtrl">
  <div>
    <form name="testForm">
      <label>Name:</label>
      <input type="text" ng-model="yourName" placeholder="Enter a name here" required>
      <button ng-click="delete()">delete</button>
      <p>Is form valid : {{testForm.$valid}}</p>
    </form>
    <p>Hello {{yourName}}!</p>
  </div>
</body>

【讨论】：

那么问题 1 呢？
“必填”选项仅在字段为空时无效，并不意味着任何操作都阻止输入为空。当您将其设置为空时，它不会阻止您。例如，您可以使用 <button ng-click=submit() ng-disabled="!testForm.$valid">submit</button> 阻止提交按钮

【解决方案3】：

这是因为范围不同。当您使用上述方法重置表单时，范围根本不受影响。因此，即使您使用 $scope.$apply() 再次运行摘要循环，它也不会起作用，因为范围根本不受您重置表单数据的方式的影响。

【讨论】：