javascript - 使用 Bootstrap 和 AngularJS 进行表单验证

Question

我正在尝试将 AngularJS 验证模型与 Bootstrap 表单验证显示结合起来。

• 如果用户加载空表单，我不希望表单立即显示错误消息。我想等到用户与表单交互。
• 如果用户提交的表单未填写必填字段，我还想显示一条错误消息。
• 如果用户开始在字段中输入内容，我希望立即显示错误消息。

所以我必须检查myForm.$submitted , myForm.<fieldName>.$dirty以及 myForm.<fieldName>.$touched .

但是，它会产生大量重复的代码，而且变化很少。

我试图制定一个指令来解决这个问题，但我似乎找不到正确的方法来解决这个复杂性。

HTML:

<div class="form-group required" ng-class="{ 'has-error': myForm.firstname.$invalid && (myForm.firstname.$dirty || myForm.$submitted || myForm.firstname.$touched)  }">
    <label for="firstname" class="control-label" translate>Profile.FirstName</label>
    <input type="text" class="form-control" id="firstname" name="firstname" required ng-model="vm.profile.firstName"/>
    <p class="help-block" ng-if="myForm.firstname.$error.required" translate>Forms.Default.Required</p>
</div>

我想拿整个ng-class属性并将其替换为更简洁的内容。该指令似乎是可行的方法，因此尝试了以下方法:

(function(){
    'use strict';
    angular.module('app')
    .directive('hasError', [function(){
        return {
            restrict: 'A',
            scope: {
                form: '=bsForm',
                control: '=bsControl'
            },
            link: function(scope, element){
                scope.$watch('form', function(){
                    var isInvalid = scope.control.$invalid && scope.control.$dirty;
                    element.toggleClass('has-error', isInvalid);
                });

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

用法:

<div class="form-group required" has-error bs-form="myForm" bs-control="myForm.firstname">
...
</div>

然而，当 form 的属性时，这并不令人耳目一新。改变了。

我错过了什么？

Answer 1

所以...我设法使指令正确地适合我的使用。

如果有更好的方法，请证明我错了。

(function(){
    'use strict';
    angular.module('app')
    .directive('hasError', [function(){
        return {
            restrict: 'A',
            scope: {
                form: '=bsForm',
                control: '=bsControl'
            },
            link: function(scope, element){
                scope.$watchGroup(['control.$invalid', 'control.$dirty', 'control.$touched', 'form.$submitted'], function(){
                    var isInvalid = scope.control.$invalid && (scope.control.$dirty || scope.form.$submitted || scope.control.$touched);
                    element.toggleClass('has-error', isInvalid);
                });

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