AngularJS：用表单验证动态输入(AngularJS: Dynamic inputs with

我是一个表单中输入创建动态。我创造了这个指令的目的：

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

我对角1.4.3运行。

问题

该模型和几乎所有的指令工作正常，但由于某些原因，形式仍然有效时添加的输入是无效的，你可以在此图像中看到。

我已经尝试过：

任何形式的验证作品的角度特性

我调试角度，似乎是附加到表单的输入是来自内部的指令编制的输入不同。

我已经叫formName.$setPristine()每个输入创建后，但没有奏效。

我无法从该指令访问的形式，但我认为是不是一个好主意，无论是。

我已经包裹着NG-form标签的输入，但没有什么有用的出来这一点。

我试图用指令编译方法，但是这仅仅是触发一次，当应用程序加载时，我已经上改变加载不同的输入选择输入。

任何帮助，非常感谢！ :)

谢谢大家反正贡献！

Answer 1:

你一定要看看我的角度验证指令/服务。它作为一吨的特点，我也支持动态输入的验证，你还可以通过一个孤立的范围，如果你想不仅具有动态输入，但也有动态的形式，帮助，也是很好的一个模式窗口内使用。

例如，让我们这个例子中是一个动态的形式和输入在控制器定义：

$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"
    }
];

它会验证绑定的元素，如果你想轻松地直接从控制器检查的形式有效性，只需使用这

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 ）。所以，请看看我的图书馆角验证和现场演示PLUNKER 。

它的满载功能（自定义正则表达式验证，AJAX的远程验证，验证摘要，替代文本错误，在与服务飞行验证，等等）。因此，请务必检查wiki文档以及...最后，它完全与量角器（1500断言）测试，所以不要害怕在生产中使用的。

请注意，我这个库的作者

Answer 2:

我有角v1.5.9就遇到了这个问题为好。这里的主要问题是，你正在编译HTML模板之前，它是在DOM，所以角不知道这是形式的一部分。如果先添加HTML，然后编译，角度会看到你输入的一种形式的孩子，它会在表单验证中使用。

看到类似的答案形式$添加验证和领域编译

不要做：

        var myCompiledString = $compile(myHtmlString)(scope);
        // ...
        element.replaceWith(myCompiledString);

做到这一点，而不是：

        var myElement = angular.element(myHtmlString)
        element.replaceWith(myElement) // put in DOM
        $compile(myElement)(scope) // $compile after myElement in DOM

注：我换了更传统的element为OP的iElement ，这是该指令的HTML元素的jQLite参考

Answer 3:

你需要使用NG-形式指令，因为您输入的包装。

你可以看到这样的例子在这里

Answer 4:

但它为我工作。您可以通过表格参照指令，并直接使用它。

在下面的代码，所述scope.form是用于了解形式的一般状态，并且scope.name访问输入字段的状态。

<NG-形式名称= “{{名称}}” NG级= “{错误：这里[名称] [名称] $无效&&形式提交$。}”>

我希望它能帮助

Answer 5:

你需要设置控制动态的名称和形式验证使用动态域名。在以下例如你看到动态名称和控制的ID和用于角（使用NG-按摩）的验证更多细节参见http://www.advancesharp.com/blog/1208/dynamic-angular-forms-validation -in-ngrepeat与- ngmessage-和实时演示

Field Num Is Required.

文章来源: AngularJS: Dynamic inputs with form validation