验证div中动态生成的输入

Question

I'm trying to validate dynamically generated inputs, but I do not know how to do this.

When I add the div that triggers the directive and inserts the inputs dynamically the div adds the 'has-error' class but does not apply the input style , anyone knows the best way to do this that I'm trying to do?

Here is the markup:

<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>

Here is the directive how generate the inputs:

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

Here is my style:

.has-error {
     border-color: red
}

Answer 1

Try border: 1px solid red; instead of just setting border-color. Border width is 0 by default, so just setting a color isn't enough

Just a couple nitpicky-subjective style comments also:

• element is already a jqLite/jquery element, so no need to call angular.element
• the scope.source.editable === true assignment can be shortened to !!scope.source.editable if you really want it to be a boolean.
• While clever, this sort of jquery style element building is generally a code smell in angular js. If you really want to go this route, I would build self-contained directives for your inputs and use inputRouter's template to choose. It's easier to understand, so your future self will thank you
• {true: 'has-error'}[conditionItem.field.hasError] took me a minute. Just write it as {conditionItem.field.hasError: 'has-error'}

I'm a big fan of these style guides for AngularJS:

• John Papa - ES5, but good advice
• Todd Motto - ES6+

There's overlap, but take what you like from each.