javascript - AngularJS:具有表单验证的动态输入

Question

我在表单中动态创建输入。我为此目的创建了这个指令:

// Generate inputs on the fly using BE data.
.directive('inputGenerator', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            id: '@',
            type: '@',
            name: '@',
            attributes: '=',
            ngModel: '=',
            ngDisabled: '='
        },
        link: function (scope, iElement, iAttrs) {
            // Get attributes
            var id         = iAttrs.id,
                type       = iAttrs.type,
                name       = iAttrs.name;

            scope.ngModel[name] = {};

            var extended_attributes = {
              "type": type,
              "id": id,
              "data-ng-model": 'ngModel.' + name + '[\'value\']',
              "name": name,
              "data-ng-disabled": "ngDisabled"
            };

            if ( ! scope.attributes) {
                scope.attributes = {};
            }

            // Append extra attributes to the object
            angular.extend(scope.attributes, extended_attributes);

            // Generate input
            var input = '<input ';

            angular.forEach(scope.attributes, function (value, key) {
                input += key + '="' + value + '" ';
            });

            input += '/>';

            // Compile input element using current scope (directive) variables
            var compiledElement = $compile(input)(scope);

            // Set the file selected name as the model value
            compiledElement.on('change', function () {
                if (this.files && this.files[0].name) {
                    var that = this;
                    scope.$apply(function () {
                        scope.ngModel[name] = {};
                        scope.ngModel[name]['value'] = that.files[0].name;
                    });
                }
            });

            // Replace directive element with generated input
            iElement.replaceWith(compiledElement);
        }
    };
}]);

此 html 行将触发指令:

<input-generator data-name="{{ item.name }}" data-ng-model="inputs.sources" data-attributes="item.attrs" data-type="{{ item.type }}" data-id="inputFile_{{ $index }}" data-ng-disabled="inputs.sources[item.name].selected" />

我在 Angular 1.4.3 上运行。

问题

模型和指令中几乎所有的东西都可以正常工作，但由于某种原因，当添加的输入无效时，表单仍然有效，如您在此图像中所见。

我已经尝试过:

表单验证的任何 Angular 特性都有效

我调试了 Angular，似乎附加到表单的输入与指令中编译的输入不同。

我已经在创建每个输入后调用了 formName.$setPristine()，但它没有用。

我无法从指令访问表单，但我认为这也不是一个好主意。

我已经用 ng-form 标签包装了输入，但是没有任何用处。

我尝试使用指令编译方法，但这只会在应用程序加载时触发一次，并且我有一个选择输入，可以在更改时加载不同的输入。

非常感谢对此的任何帮助! :)

无论如何感谢大家的贡献!!

Answer 1

你绝对应该看看我的 Angular-Validation Directive/Service .它有很多功能，我还支持动态输入验证，您还可以传递一个独立的范围，如果您不仅想要动态输入而且还想要动态表单，这对您有帮助，也适合在模态窗口内使用。

例如，让我们将此示例作为 Controller 中定义的动态表单和输入:

$scope.items.item1.fields = [
   {
      name: 'firstName',
      label:'Enter First Name',
      validation:"required"
    },
    {
      name: 'lastName',
      label: 'Enter Last Name',
      validation:"required"
    }
  ];
  $scope.items.item2 = {
    heading:"Item2",
    formName:"Form2"
  };
  $scope.items.item2.fields = [
   {
      name: 'email',
      label:'Enter Email Id',
      validation:"required"
    },
    {
      name: 'phoneNo',
      label: 'Enter Phone Number',
      validation:"required"
    }
];

它将验证绑定(bind)到元素，如果您想直接从 Controller 轻松检查表单有效性，只需使用它

var myValidation = new validationService({ isolatedScope: $scope });

function saveData() {
    if(myValidation.checkFormValidity($scope.Form1)) {
        alert('all good');
    }
}

你也可以像这样使用插值

<input class="form-control" type="text" name="if1"
        ng-model="vm.model.if1"
        validation="{{vm.isRequired}}" />

或者使用单选框/复选框来启用/禁用您在启用时仍要验证的字段:

ON <input type="radio" ng-model="vm.disableInput4" value="on" ng-init="vm.disableInput4 = 'on'">
OFF <input type="radio" ng-model="vm.disableInput4" value="off">

<input type="text" name="input4" 
        ng-model="vm.input4" 
        validation="alpha_dash|min_len:2|required" 
        ng-disabled="vm.disableInput4 == 'on'" />

它确实有很多功能，并且在 Bower 和 NuGet 上都可用(在 angular-validation-ghiscoding 的标签名下) >).所以请看我的图书馆Angular-Validation和 上的现场演示 PLUNKER 。

它加载了功能(自定义 Regex 验证器、AJAX 远程验证、验证摘要、替代文本错误、使用服务进行动态验证等)。所以一定要检查 Wiki Documentation还有...最后，它已经使用 Protractor 进行了全面测试(超过 1500 个断言)，所以不要害怕在生产中使用。

请注意我是这个库的作者