Question

我正在尝试在角度js中创建联系表单。我想突出显示在单击“提交”按钮时在服务器端验证中无效的字段。

我的HTML代码 -

<form ng-controller="SubmitButtonCtrl">
            <label>STREET ADDRESS</label><br/>
            <input type="text" ng-model="user.streetAddress">
            <span>{{user.errorStreetAddress}}</span><br/>
            <label>CITY</label><br/>
            <input type="text" ng-model="user.city">
            <span >{{user.errorCity}}</span><br/>
            <label>ZIP CODE</label><br/>
            <input type="text" ng-model="user.zipCode">
            <span>{{user.errorZipCode}}</span><br/>
            <button ng-click="submit()">Submit</button>
        </form>

这是我的角度js代码。我很困惑，我怎么能实现这一点。有谁知道我可以在angularJS中轻松创建表单的网站。

   (function(){
        angular.module('app', [])
        .controller('SubmitButtonCtrl', function($scope, $http){
            $scope.submit = function(){
                $http({
                    method  : 'POST',
                    url     : 'api/getMemberList/',
                    data    : $scope.user, //forms user object
                    headers : {'Content-Type': 'application/x-www-form-urlencoded'} 
                })
                .success(function(data) {
                    if (data.errors) {
                        // Showing errors.
                        $scope.errorStreetAddress = data.errors.streetAddress;
                        $scope.errorCity = data.errors.city;
                        $scope.errorZipCode = data.errors.zipCode;
                    } else {

                    }
                });
            };
        });
    })();

由于

Answer 1

angular.module('yourApp').directive('serverError', function(){
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope,element,attrs,ctrl){
      return element.on('change keyup', function(){
        return scope.$apply(function(){
          return ctrl.$setValidity('server', true);
        });
      });
    }
  };
});

click here

与AngularJS中的服务器端验证联系表单

1 个答案: