простой запрос формы ввода в угловом

Question

все, что я пытаюсь сделать здесь делает запрос Ajax к базе данных в качестве пользовательских типов в ZipCode, чтобы увидеть, если он доступен или нет

это просто мне нужно, чтобы это сделать вызова после того, как поле ввода 5 цифр не менее, если код существует в базе данных должна появиться немного зеленая галочка, если не красный крестик знак является знаком появляться

<input type="text" ng-model="checkname">

Answer 1

Вам нужен прослушиватель изменения текстового поля Событие:

<input type="text" ng-model="zip" ng-change="zipChanged()" /> 

И тогда в вашем угловом контроллере:

function MyController($scope, $http) { 
    $scope.zipChanged = function() { 
     // would be better to use regex to check zip format. 
     if ($scope.zip.length === 5) { 
      $http({ 
       method: 'GET', 
       url: '/checkZip/' + $scope.zip 
      }).then(function(response) { 
       // Check response and show red or green mark. 
      }); 
     } 
    } 
} 

Обратите внимание, вы не запрашивать базу данных непосредственно с помощью Ajax. Ajax помогает вам общаться с сервером в асинхронном стиле. Таким образом, вам также понадобится сервер REST с действием /checkZip/{zip}, который проверяет ваш почтовый индекс на базу данных и возвращает ответ.

Answer 2

вы можете попробовать добавить ngChange, а затем проверить длину

<input type="text" ng-model="checkname" ng-change="checkname()"> 

затем в контроллере

$scope.checkname = function(){ 
    //check the length of your variable and do something 
} 

Answer 3

Вы можете создать простой custom async validator, который будет делать чек. Это имеет то преимущество, что оно будет работать со встроенной Угловой проверкой, чтобы упростить отображение сообщений об ошибках или предотвратить отправку формы.

Это включает в себя использование директивы для добавления функции проверки на $asyncValidators контроллера ng-model. Эта функция сделает запрос $http и вернет его обещание. Если это допустимо, проверка будет проходить, иначе она не удастся.

Вот рабочий образец с ложным вызовом $http. Это произойдет, только если zip «90210».

(function() { 
 

 
    var app = angular.module('myapp', []) 
 
    
 
    app.controller('ctrl1', function($scope) { 
 
    $scope.myField = ""; 
 
    }); 
 
    
 
    app.directive('zipCheck', function($q) { 
 
    return { 
 
     require: 'ngModel', 
 
     link: function(scope, elm, attrs, ctrl) { 
 
     // add an async validator to the form's validators 
 
     ctrl.$asyncValidators.zipCheck = function(modelValue, viewValue) { 
 
    
 
      // don't validate if empty or less than 5 chars 
 
      if (ctrl.$isEmpty(modelValue) || modelValue.length < 5) { 
 
       return $q.resolve(); 
 
      } 
 
      
 
      // the actual http call 
 
      /* 
 
      return $http.get('/checkZip?zip='+modelValue) 
 
      .then(function(response) { 
 
       // handle response as appropriate 
 
       return response == "valid"; 
 
      }); 
 
      */ 
 
    
 
      // simulate the http request 
 
      var deferred = $q.defer(); 
 
      window.setTimeout(function() { 
 
      if(modelValue == "90210") { 
 
       deferred.resolve(); 
 
      } 
 
      else { 
 
       deferred.reject(); 
 
      } 
 
      }, 500); 
 
      return deferred.promise; 
 
      
 
     }; 
 
     } 
 
    }; 
 
    }); 
 

 
})();

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

 
<div ng-app="myapp" ng-controller="ctrl1"> 
 

 
    <form name="myForm"> 
 
    <!-- note the zip-check attribute - this is the validation directive --> 
 
    Zip Code: <input name="myField" ng-model="myField" zip-check /> 
 

 
    <!-- validation feedback - checking, invalid, valid --> 
 
    <span ng-show="myForm.myField.$pending.zipCheck">...</span> 
 
    <span ng-show="myForm.myField.$error.zipCheck">✖</span> 
 
    <span ng-show="myField.length >= 5 && myForm.myField.$valid">✔</span> 
 
    </form> 
 

 
</div>