角度的简单表单输入请求答案

【问题标题】：simple form input request in angular角度的简单表单输入请求
【发布时间】：2016-07-13 15:11:48
【问题描述】：

我在这里要做的就是在用户输入 zipCode 时向数据库发出 ajax 请求以查看它是否可用

只要输入字段不少于5位，我就需要它来拨打电话，如果代码存在于数据库中，应该出现一个绿色的小复选标记，如果不是红色的X标记是出现的标记

&lt;input type="text" ng-model="checkname"&gt;

【问题讨论】：

问题是什么？你能发布你的javascript吗？

标签： javascript angularjs

【解决方案1】：

您可以尝试添加 ngChange 然后检查长度

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

然后在你的控制器中

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

【讨论】：

【解决方案2】：

您需要一个文本框更改事件的监听器：

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

然后在你的 Angular 控制器中：

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 帮助您以异步方式与服务器通信。因此，您还需要一个带有操作 /checkZip/{zip} 的 REST 服务器，它会根据数据库检查您的邮政编码并返回响应。

【讨论】：

【解决方案3】：

您可以创建一个简单的custom async validator 来进行检查。这样做的好处是它可以与内置的 Angular 验证一起使用，从而更容易显示错误消息或防止表单被回发。

这涉及使用指令向ng-model 控制器的$asyncValidators 添加验证功能。此函数将发出$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>

【讨论】：