Angularjs 验证。以编程方式设置表单字段属性答案

【问题标题】：Angular.js validation. Programatically set form fields propertiesAngularjs 验证。以编程方式设置表单字段属性
【发布时间】：2013-09-13 00:47:27
【问题描述】：

我正在尝试使用 angular 设置表单验证系统，如下所示。

当字段同时为 $invalid && $dirty 时，分配一个错误类。

这适用于各个领域。这是一个示例字段。

<div class="control-group" ng-class="getErrorClasses(schoolSignup.first_name)">
      <label class="control-label" for="first_name">First Name</label>
       <div class="controls">
            <input type="text" class="input-xlarge" id="first_name" name="first_name" required ng-maxlength="30" ng-model="school.first_name">
            <span class="help-inline" ng-show="showError(schoolSignup.first_name, 'required')">This field is required</span>
            <span class="help-inline" ng-show="showError(schoolSignup.first_name, 'maxlength')">Maximum of 30 character allowed</span>
        </div>
   </div>

schoolSignup 是表单的名称。

ng-class="getErrorClasses(schoolSignup.first_name)"> 在控制器中定义为

$scope.getErrorClasses = function(ngModelContoller) {
        return {
            error: ngModelContoller.$invalid && ngModelContoller.$dirty
        };
    };

并且关于错误帮助项ng-show="showError(schoolSignup.first_name, 'required')"定义为：

$scope.showError = function(ngModelController, error) {
      return ngModelController.$dirty && ngModelController.$error[error];
  };

这一切都很好。

但是，我想要做的是，如果用户单击提交按钮并且所需的所有单个字段均无效，则在相应字段旁边显示 required 错误消息。

这需要基于此系统将所有单个字段设置为 $dirty 并将 $error['required'] 值设置为 true。

我在提交按钮上设置了一个指令can-save，如下所示，它可以访问表单。

<button class="btn btn-primary btn-large" type="submit" can-save="schoolSignup">Register</button>

.directive('canSave', function () {
    return function (scope, element, attrs) {

        var form = scope.$eval(attrs.canSave);

        var valid = false;

        element.click(function(){
            if(!valid)
            {
                // show errors

                return false;
            }

            return true;
        });

        scope.$watch(function() {
            return form.$dirty && form.$valid;
        }, function(value) {
            valid = !!value;
        });
    }

});

除了根据需要显示错误之外，这一切都有效。

任何关于如何实现这一点的想法将不胜感激。

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

对于任何感兴趣的人，我已经修改了我的指令以遍历错误并将每个错误设置为$dirty，然后运行$rootScope.$digest()：

.directive('canSave', function ($rootScope) {
    return function (scope, element, attrs) {

        var form = scope.$eval(attrs.canSave);

        element.click(function () {
            if(form.$dirty && form.$valid) {
                return true;
            } else {
                // show errors
                angular.forEach(form.$error, function (value, key) {
                    var type = form.$error[key];

                    angular.forEach(type, function (item) {
                        item.$dirty = true;
                        item.$pristine = false;
                    });
                });

                $rootScope.$digest();

                return false;
            }
        });
    }
});

【讨论】：