Question

我是角色的新手，在尝试表单验证时，我遇到了以下情况：

设置：我的表单中有一个“必填”字段，该字段绑定到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>

Answer 1

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

您可以查看我对此问题的回答，以供进一步参考： 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>

Answer 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>

Answer 3

这是因为范围不同。使用上述方法重置表单时，范围根本不受影响。因此，即使您使用$ scope。$ apply（）再次运行摘要周期，它也不会起作用，因为范围完全不受重置表单数据的影响。

即使值无效，角度模型也会更新

3 个答案: