动态生成的输入指令AngularJS表单验证不ngForm工作 [英] AngularJS form validation on dynamically generated input directives not working with ngForm

问题描述

我想验证使用的指令和隔离示波器生成的动态表单输入。该指令外面我已经得到的主要形式，并在里面NG-重复我试图用NG-形式，但它并没有以往任何时候都显示错误消息。起初，我对NG-重复NG-形式，但想通因为它是出在指令范围，将无法工作，所以把它放在指令的父分区，但仍然没有显示无效电子邮件验证

I'm trying to validate dynamic form input generated using a directive and isolate scopes. Outside the directive I've got the main form, and inside the ng-repeat I'm trying to use ng-form, but it doesn't ever show the error messages. Initially I had the ng-form on ng-repeat, but figured that wouldn't work since it was out of scope in the directive, so placed it on the parent div of the directive, but still doesn't show validation on invalid email.

形式与NG-重复和现场指导

Form with ng-repeat and field directive

<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-有效的：

Looks like it should work looking at the generated markup indicating the field is ng-valid:

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

难道只是怎么我访问窗体：

Is it just how I'm accessing subForm:

subForm[field.field_name].$dirty

更新
我发现周围的工作，这和回答了下面，请参见 href=\"http://stackoverflow.com/a/25652866/1148107\">

UPDATE I found the work around for this and answered it below, see here

推荐答案

有关此问题的解决方案显然是在作品中，并已是一个问题为2年。你们的选票添加到它 GitHub的！最简单的方法来实现，可以说是最佳的解决方案，可以发现这里与信贷来的Thinkscape ，而且我在下面复制它。

The solution for this issue is apparently in the works, and has been an issue for 2+ years. Add your vote to it on GitHub! The easiest solution to implement and arguably the best solution can be found here with credit to Thinkscape, and I've copied it below.

  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'
    }];
});

我只是放弃了它在，标志着它作为一个依赖，并在我的问题的形式运作。

I just dropped it in, marked it as a dependency, and the form in my question works.

干杯

这篇关于动态生成的输入指令AngularJS表单验证不ngForm工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！