在控制器中调用angular $ setValidity

Question

我有一个输入字段和一个按钮,用户输入一个地址进行地理定位.它是更大形式的一部分,但我希望在按下"Map it"按钮而不是最终表单提交时处理该字段的有效性.如何将此字段设置为无效？调用$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>

控制器:

$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在控制器中设置输入字段,只需传递表单并访问输入,就像在标记中一样.我还包括一个工作示例:

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>