angularjs - 在 Controller 中调用 angular $setValidity

Question

我有一个输入字段和一个按钮，用户可以在其中输入要进行地理定位的地址。它是更大表单的一部分，但我希望在他们按下“映射”按钮而不是最终表单提交时处理该字段的有效性。如何将此字段设置为无效？调用 $setValidity导致未定义/非函数错误。

形式位:

<form name="myForm">
  <input type="text" name="addy" ng-model="addy">
  <a ng-click="geoCode()">Map it!</a>
  <span class="error" ng-hide="myForm.addy.$invalid">Bad field</span>
  ....
</form>

Controller :

$scope.addy = null

// This is a more complex async function trimmed down to essentials
$scope.geoCode = function() {
  $scope.addy.$setValidity('unique', false);
});

我还希望该字段只检查一次。因此，如果他们输入一个地址并且没有按下 Map it 按钮，那么它会在提交时被检查，但是如果他们确实按下了 Map 按钮并且字段是有效的，那么它将不会再次通过异步函数运行。关于如何最好地处理这个问题的建议？

Answer 1

如果您想设置 validity在 Controller 中的输入字段中，您可以简单地传递表单并访问您的输入，就像您在标记中一样。我还包括一个工作示例:

var app = angular.module('form-example', []);

app.controller('FormCtrl', function($scope) {
  var vm = this;

  vm.geoCode = function(form) {
    form.addy.$setValidity('unique', false);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

<form ng-app="form-example" name="myForm" ng-controller="FormCtrl as vm">
  <input type="text" name="addy" ng-model="vm.addy">
  <a ng-click="vm.geoCode(myForm)">Map it!</a>
  <span class="error" ng-hide="myForm.addy.$invalid">Bad field</span>
</form>