Geek Answers Handbook

Call angular $ setValidity in the controller

I have an input field and a button in which the user enters the address for geolocation. This is part of a larger form, but I want the validity of this field to be processed when they click the Map button, and not the final submit form. How to set this field as invalid? The call $setValidityresults in an undefined / not function error.

Shape Bit:

<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);
});

I would also like this field to be checked only once. Therefore, if they enter the address and do not click the "Map" button, it will be checked on sending, but if they click the "Map" button and the field is valid, then it will not work again via the asynchronization function. Suggestions on how best to handle this?

+4
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>
Hide result
+13

More articles:


All Articles