Question

我正在试图弄清楚是否可以验证数据客户端，以确保不会向数据库发送重复项。我有一个角度应用程序从api调用获取数据。这是我当前用于添加新主题的控制器（功能完美，但没有数据验证）：

angular.module('myApp.controllers')
    .controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location', '$route',
    function ($scope, SubjectsFactory, $location, $route) {

        // callback for ng-click 'createNewSubject':
        $scope.createNewSubject = function () {
            SubjectsFactory.create($scope.subjects);
            $location.path('/subjects');

        }

    }]);

以下是我一直在尝试进行数据验证的内容：

angular.module('myApp.controllers')
    .controller('SubjectNewCtrl', ['$scope', 'SubjectsFactory', '$location', '$route',
    function ($scope, SubjectsFactory, $location, $route) {

        // callback for ng-click 'createNewUser':
        $scope.createNewSubject = function () {

            var newSubject = $scope.subject.name;
            var someSubject = $scope.subjects;
            var oldSubject;

            if(newSubject){
                angular.forEach($scope.subjects, function(allSubjects){
                    if(newSubject.toLowerCase() == allSubjects.name.toLowerCase()){
                        oldSubject = true;
                    }
                });
                if (!oldSubject){
                   SubjectsFactory.create($scope.subjects); 
                }
            }
        }

    }]);

这给我一个控制台错误 - TypeError: Cannot read property 'name' of undefined。如何从html访问我的新主题的'name'属性？谁能告诉我，我想做的事情是否可行/有意义？

Answer 1

如果我正确理解您的问题，您应该对您尝试验证的特定字段使用指令。一个独特的电子邮件指令是一个常见的例子。这是我过去使用的一个。没什么好看的。

MyApp.directive('uniqueEmail', ['$http', function($http) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            //set the initial value as soon as the input comes into focus
            element.on('focus', function() {
                if (!scope.initialValue) {
                    scope.initialValue = ctrl.$viewValue;
                }
            });
            element.on('blur', function() {
                if (ctrl.$viewValue != scope.initialValue) {
                    var dataUrl = attrs.url + "?email=" + ctrl.$viewValue;
                    //you could also inject and use your 'Factory' to make call
                    $http.get(dataUrl).success(function(data) {
                        ctrl.$setValidity('isunique', data.result);
                    }).error(function(data, status) {
                        //handle server error
                    });
                }
            });
        }
    };
}]);

然后在您的标记中，您可以像这样使用它。

<input type="text" name="email" ng-model="item.email" data-unique-email="" data-url="/api/check-unique-email" />
<span class="validation-error" ng-show="form.email.$error.isunique && form.email.$dirty">Duplicate Email</span>

希望这就是你要找的东西。

Answer 2

我已经多次在Angular js中实现了对象创建。

我的createNew按钮方法通常只创建一个新的javascript Object（）并将scope.currentObject设置为新的Object（）;

在你的情况下，似乎$ scope.subject没有初始化为任何东西，因此错误。

我猜你的表单上必须有一个绑定了subject.name字段的html输入，但没有主题Object来保存名称它实际上是未绑定的。

如果我希望用户输入名称，请单击“创建”按钮以验证是否未使用该名称。我将新的Name输入绑定到另一个$ scope变量（可能是$ scope.newName）

然后在createNewSubject方法中，你可以实际创建一个这样的新主题：

  $scope.subject = new Object();
  $scope.subject.name = $scope.newName;

然后您可以运行验证码。

客户端在angularJS中重复数据验证

2 个答案: