Question

我有一个使用AngularJS ngForm 指令的表单。此表单显示数组中的项列表，单击任何项将其从数组中删除。默认情况下，该按钮处于禁用状态，如果从阵列中删除了某个项目，则应启用该按钮。

有没有办法让ngForm跟踪对阵列的更改并设置$pristine状态，以便按钮在已禁用和已启用之间切换？< / p>

这是我创建的一个plnkr，演示了我对ngForm和列表的使用。单击列表中的项目将从列表中删除该项目，但不会启用该按钮。 https://plnkr.co/edit/am8jIazJmKtabx37Ev8C

这是我的示例代码。

JavaScript的：

var app = angular.module('myApp', []);

app.controller('MyController', [function() {
  var vm = this;

  vm.data = [1, 2, 3];

  vm.removeItem = function(i) {
    var index = vm.data.indexOf(i);
    vm.data.splice(index, 1);
  }

}]);

HTML：

<body ng-app="myApp">
  <div ng-controller="MyController as vm">
    <div ng-form="form">
      <ul>
        <li ng-repeat="i in vm.data" ng-click="vm.removeItem(i)">
          Click to remove item - {{i}}
        </li>
      </ul>

      <button type="button" ng-disabled="form.$pristine">
        submit
      </button>
    </div>
  </div>
</body>

Answer 1

假设您不想使用$scope。首先，您必须在vm变量上声明您的表单，如下面的代码，然后您的控制器就能看到您的表单。

<form ng-form="vm.form">
...
</form>

然后，在控制器内部，您可以强制$dirty而不是$pristine。 $priestine状态表示该表单未受影响，在这种情况下，您希望根据Angularjs docs for form.FormController设置$dirty的未经修改的对位。

...
vm.form.$setDirty();
...

完整代码：

＆＃13;

var app = angular.module('myApp', []);

app.controller('MyController', [function() {
  var vm = this;

  vm.data = [1, 2, 3];

  vm.removeItem = function(i) {
    var index = vm.data.indexOf(i);
    vm.data.splice(index, 1);
    vm.form.$setDirty();
  }

}]);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
  <div ng-controller="MyController as vm">
    <div ng-form="vm.form">
      <ul>
        <li ng-repeat="i in vm.data" ng-click="vm.removeItem(i)">
          Click to remove item - {{i}}
        </li>
      </ul>

      <button type="button" ng-disabled="vm.form.$pristine">
        submit
      </button>
    </div>
  </div>
</body>

＆＃13;

Answer 2

您可以在代码中设置它：$scope.form.$setPristine();

https://docs.angularjs.org/api/ng/type/form.FormController

修改但是我使用了一个单独的变量：

<button type="button" ng-disabled="!vm.enableButton"> submit </button>

和

app.controller('MyController', [function() { var vm = this; vm.enableButton = false; vm.data = [1, 2, 3]; vm.removeItem = function(i) { var index = vm.data.indexOf(i); vm.data.splice(index, 1); vm.enableButton = true; } }]);

https://plnkr.co/edit/S8QgytDskCBKadHasjF1?p=preview

Answer 3

$pristine是关于用户与表单控件的交互。您的UI不提供用户传统交互，而是修改绑定数据。这就是为什么$pristine不会在此类互动中发生变化的原因。因此，您可以在方法中调用$scope.form.$setDirty()，或者设置一些标志并将其用于ng-disabled，或者使用数组长度检查而不是该标志：

ng-disabled="vm.data.length == 3"

如何从阵列中删除项目时使用angulars ngForm启用按钮

3 个答案: