AngularJS validación de formularios en directivas de entrada generadas dinámicamente que no funcionan con ngForm

Question

Estoy tratando de validar la entrada de formulario dinámico generada usando una directiva y aislar ámbitos. Fuera de la directiva tengo el formulario principal, y dentro de ng-repeat estoy tratando de usar ng-form, pero nunca muestra los mensajes de error. Inicialmente tenía el formulario ng en ng-repeat, pero pensé que no funcionaría ya que estaba fuera del alcance de la directiva, por lo que lo coloqué en el div padre de la directiva, pero aún no muestra la validación en un correo electrónico no válido .

Formulario con ng-repeat y directiva de campo

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

Directiva de campo de formulario

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

Parece que debería funcionar mirando el marcado generado que indica que el campo es ng-válido:

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

¿Es solo cómo estoy accediendo a subForm:

subForm[field.field_name].$dirty

ACTUALIZACIÓN Encontré el trabajo para esto y lo respondí a continuación, vea aquí

javascript jquery angularjs forms validation

4

mtpultz 3 sep. 2014 a las 22:32

Answer 1

La solución para este problema aparentemente está en proceso y ha sido un problema por más de 2 años. ¡Agregue su voto en GitHub! La solución más fácil de implementar y posiblemente la mejor solución se puede encontrar aquí con crédito a Thinkscape , y lo he copiado a continuación.

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

Lo dejé caer, lo marqué como una dependencia y el formulario en mi pregunta funciona.

Salud

7

mtpultz 3 sep. 2014 a las 20:36

Answer 2

Use esto como una directiva de campo de formulario:

<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-form mismo maneja el nombre del campo. no puedes poner name="{{field.field_name}}" así.

1

Mukund Kumar 3 sep. 2014 a las 19:12

AngularJS validación de formularios en directivas de entrada generadas dinámicamente que no funcionan con ngForm

2 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript