AngularJS表单验证动态生成的输入指令不与ngForm工作

Question

我想验证使用指令生成的动态表单输入并隔离范围。在指令之外，我有主窗体，在ng-repeat内部，我试图使用ng-form，但它不会显示错误消息。最初，我在ng-repeat上使用了ng-form，但认为这是行不通的，因为它超出了指令的范围，所以将它放在指令的父div上，但仍然不显示对无效电子邮件的验证。

形式NG-重复和现场指导

<form name="mainForm" 
     role="form" 
     ng-controller="WizardFormController as wizFormCtrl" 
     ng-submit="submit(mainForm.$valid)" 
     novalidate> 

     <div ng-repeat="field in panel.form_fields"> 

      <form-field field="field" 
         model="models[field.field_name]" ng-form="subForm"> 
      </form-field> 

     </div> 

     <div class="form-group clearfix"> 
     <button class="btn btn-primary pull-right" 
       ng-click="update(models)" 
       ng-disabled="mainForm.$invalid">Save Progress</button> 

     </div> 

</form> 

表格字段指令

<div class="form-group" ng-form="subForm"> 

    <label for="{{field.field_name}}">{{field.field_label}}</label> 

    <input type="text" 
     class="form-control" 
     id="{{field.field_id}}" 
     name="{{field.field_name}}" 
     ng-model="model"> 

    <div ng-show="subForm[field.field_name].$dirty && 
       subForm[field.field_name].$invalid">Invalid: 

    <span ng-show="subForm[field.field_name].$error.email">This is not a valid email.</span> 
    </div> 

</div> 

看起来像它应该工作，寻找在生成的标记指示场NG-有效：

<div class="form-group ng-scope ng-dirty ng-valid-required ng-valid ng-valid-email" 
    ng-form="subForm"> 

它是我如何访问子表单：

subForm[field.field_name].$dirty 

UPDATE 我发现周围的工作，这和下面回答了这个问题，看here

Answer 1

这个问题的解决方案显然是在工作中，并且一直是2年以上的问题。将您的投票加入GitHub！最简单的解决方案，可以说是最好的解决方案可以找到here与信贷Thinkscape，我已经复制下面。

angular.module('interpol', []) 

    .config(function($provide) { 

    $provide.decorator('ngModelDirective', function($delegate) { 
     var ngModel = $delegate[0], controller = ngModel.controller; 
     ngModel.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) { 
     var $interpolate = $injector.get('$interpolate'); 
     attrs.$set('name', $interpolate(attrs.name || '')(scope)); 
     $injector.invoke(controller, this, { 
      '$scope': scope, 
      '$element': element, 
      '$attrs': attrs 
     }); 
     }]; 
     return $delegate; 
    }); 

    $provide.decorator('formDirective', function($delegate) { 
     var form = $delegate[0], controller = form.controller; 
     form.controller = ['$scope', '$element', '$attrs', '$injector', function(scope, element, attrs, $injector) { 
     var $interpolate = $injector.get('$interpolate'); 
     attrs.$set('name', $interpolate(attrs.name || attrs.ngForm || '')(scope)); 
     $injector.invoke(controller, this, { 
      '$scope': scope, 
      '$element': element, 
      '$attrs': attrs 
     }); 
     }]; 
     return $delegate; 
    }); 
    }) 

    .run(function($rootScope) { 
    $rootScope.models = [{ 
     value: 'foo' 
    },{ 
     value: 'bar' 
    },{ 
     value: 'baz' 
    }]; 
}); 

我刚把它放进去，标记为依赖项，并且我的问题中的表单工作。

干杯

Answer 2

以此为表单域指令：

<div class="form-group" ng-form="subForm"> 

    <label for="{{field.field_name}}">{{field.field_label}}</label> 

    <input type="email" 
     class="form-control" 
     id="formid" 
     name="formname" 
     ng-model="model"> 

    <div ng-show="subForm.formname.$dirty && 
       subForm.formname.$invalid">Invalid: 

    <span ng-show="subForm.formname.$error.email">This is not a valid email.</span> 
    </div> 

</div> 

NG-形式本身处理的字段名。你不能像这样放name="{{field.field_name}}"。