验证 div 内动态生成的输入答案

【问题标题】：Validate dynamically generated inputs inside a div验证 div 内动态生成的输入
【发布时间】：2019-03-01 15:53:09
【问题描述】：

我正在尝试验证动态生成的输入，但我不知道该怎么做。

当我添加触发指令并动态插入输入的 div 时，div 添加了“has-error”类但不应用输入样式，任何人都知道最好的方法做我想做的事？

这里是标记：

<div ng-if="conditionItem.field.id"
     ng-class="{true: 'has-error'}[conditionItem.field.hasError]"
     dynamic
     input-router
     source="conditionItem.field"
     ng-click="FieldConditionsCtrl.valueTest(conditionItem.field.hasError)"
     ng-required="true"
     ng-model="conditionItem.situation[$index]">
</div>

这是如何生成输入的指令：

(function() {
  'use strict';

  angular
    .module('applicationInputs', ['rzModule', 'focus-if', 'ui.utils.masks'])
      .directive('inputRouter', inputRouter);

    /** @ngInject */
    function inputRouter($compile){
        return {
            restrict: 'EA',
            scope: {
                ngModel: '=',
                source: '=',
                placeholder: '@',
                tabIndex: '='
            },
            link: function(scope, element, attrs) {
                var canvas = angular.element(element[0]);
                scope.source.editable = angular.isUndefined(scope.source.editable) ? true : scope.source.editable === true;

                //used by setting to override selected field
                if (angular.isDefined(attrs.dynamic)) {
                    scope.$watch('source', function () {
                        var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
                        canvas.children().detach();
                        canvas.append($compile(html)(scope));
                    });

                } else {
                    var html = '<' + scope.source.type + 'input></' + scope.source.type + 'input>';
                    canvas.append($compile(html)(scope));
                }
            }
        }
    }
})();

这是我的风格：

.has-error {
     border-color: red
}

【问题讨论】：

标签： javascript angularjs angularjs-directive

【解决方案1】：

试试边框：1px纯红色；而不仅仅是设置边框颜色。边框宽度默认为0，仅设置颜色是不够的

还有一些挑剔的主观风格的cmet：

element已经是jqLite/jquery element，所以不需要调用angular.element
scope.source.editable === true 赋值可以缩短为 !!scope.source.editable 如果您真的希望它是一个布尔值。
虽然很聪明，但这种 jquery 风格的元素构建通常是 angular js 中的代码异味。如果你真的想走这条路，我会为你的输入构建独立的指令，并使用 inputRouter 的模板来选择。它更容易理解，所以你未来的自己会感谢你
{true: 'has-error'}[conditionItem.field.hasError] 花了我一分钟。写成 {conditionItem.field.hasError: 'has-error'}

我非常喜欢这些 AngularJS 风格指南：

John Papa - ES5，但是很好的建议
Todd Motto - ES6+

有重叠，但各取所需。

【讨论】：