javascript - 使用 Jhipster 进行表单验证

Question

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

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

1. 假设我有一个必需的文本字段。
2. 输入一个字符，字段生效。
3. 删除文本，字段变为无效，出现错误消息，输入的表单组变为红色。
4. 现在重新输入文本。字段变为有效且错误消息消失，但has-error 表单组上的类尚未删除。表单组仍然是红色。
5. 当您继续输入第二个字符，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);
    }); 
}

表单验证指令不会立即更新，但会因一次输入更改而滞后。我无法弄清楚代码的哪一部分需要修改。

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

Answer 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);
                        });
                    });
                }
            });
        }