使用 Jhipster 进行表单验证答案

【问题标题】：Form Validation with Jhipster使用 Jhipster 进行表单验证
【发布时间】：2016-06-06 04:03:00
【问题描述】：

我的 JHipster 生成器版本是：generator-jhipster 2.27.1

我使用show-validation 进行表单验证。除了以下情况，一切似乎都正常。

假设我有一个文本字段是required。
输入一个字符，字段生效。
删除文本，字段变为无效，出现错误消息，输入的表单组变为红色。
现在重新输入文本。字段变为有效且错误消息消失，但 has-error 表单组上的类尚未删除。表单组仍然保持红色。
当您继续输入第二个字符，has-error 现在已被删除。

这是来自 form.directive.js

的相关代码

$inputs.each(function() {
    var $input = $(this);
    scope.$watch(function() {                               
       return $input.hasClass('ng-invalid') && $input.hasClass('ng-dirty');
    }, function(isInvalid) {
       $formGroup.toggleClass('has-error', isInvalid);
    }); 
}

form-validation 指令不会立即更新，而是落后于一个输入更改。我无法弄清楚代码的哪一部分需要修改。

添加了控制台日志，但无济于事。我认为它与文本值与模型值有关，但不知道如何解决。

【问题讨论】：

标签： javascript angularjs validation jhipster

【解决方案1】：

这个怎么样？

（添加：attrs、formCtrl attr 链接函数并更改 $watch.function - 如果需要，取消注释脏检查）

            link: function (scope, element, attrs, formCtrl) {
            element.find('.form-group').each(function() {
                var $formGroup = $(this);
                var $inputs = $formGroup.find('input[ng-model],textarea[ng-model],select[ng-model]');

                if ($inputs.length > 0) {
                    $inputs.each(function() {
                        var $input = $(this);
                        scope.$watch(function() {
                            //inputs need to have 'name' attribute for this to work
                            return formCtrl[$input[0].name].$invalid;
                           //&& formCtrl[$input[0].name].$dirty;
                        }, function(isInvalid) {
                            $formGroup.toggleClass('has-error', isInvalid);
                        });
                    });
                }
            });
        }

【讨论】：