ng-click 复选框不更新表单的 $pristine 属性答案

【问题标题】：ng-click on checkbox not updating $pristine property of formng-click 复选框不更新表单的 $pristine 属性
【发布时间】：2019-07-10 18:15:57
【问题描述】：

AngularJS第一次更新隐藏文本时不会更新表单的$pristine属性

我在 AngularJS 中有一个表单，我想知道表单的任何字段是否已更新。

当一个复选框被更新时，对应的$pristine属性不会被更新。

所以我添加了一个隐藏的文本框，它绑定到一个复选框的同一 ng-model。

但它第一次不起作用，从第二次开始起作用。

HTML 代码如下 -

<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.9.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>

<body ng-app="formApp" ng-controller="formController">
  <div>
    <form name="myForm">
      <label>Personal Question</label>
      <div class="checkbox">
        <label>
          <input type="checkbox" name="awesome" ng-model="formData.awesome" 
                 ng-true-value="ofCourse" ng-false-value="iWish" 
                 ng-click="onClick()"> Are you awesome?
          <input type="text" name="hidden-awesome" ng-model="formData.awesome"
                 ng-hide="true"/>
        </label>
      </div>
    </form>
  </div>
</body>
</html>

AngularJS 代码如下 -

var formApp = angular.module('formApp', [])
.controller('formController', function($scope) {
  $scope.onClick = function() {
    alert('is myform is not modified? '+ $scope.myForm.$pristine);
    console.log(JSON.stringify($scope.myForm))
  };
});

我的代码在plunker here。

我应该如何处理这种情况？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

使用ng-change 指令代替ng-click：

  <input type="checkbox" name="awesome" ng-model="formData.awesome" 
         ng-true-value="ofCourse" ng-false-value="iWish" 
         ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶o̶n̶C̶l̶i̶c̶k̶(̶)̶"̶
         ng-change="onClick()" > Are you awesome?

ng-change 指令添加了一个$viewChangeListener，该$viewChangeListener 在用户操作控件之后被调用。

ng-click 指令添加了一个点击处理程序，该处理程序在ngModelController 更新模型之前被调用。

注意：可以使用 tab 键聚焦复选框，并使用 enter 键以及鼠标单击进行操作。

有关详细信息，请参阅

AngularJS ng-change Directive API Reference

【讨论】：