Come convalidare i campi dei moduli dinamici nella direttiva angolare?

Vorrei creare un modulo con campi creati in direttiva. Il binding dei dati dei dati funziona correttamente ma la convalida non funziona.Come convalidare i campi dei moduli dinamici nella direttiva angolare?

questo è html:

<body ng-controller="MainCtrl"> 
    <h1>form</h1> 
    <form name="form"> 
     <div ng-repeat="conf in config"> 
      <div field data="data" conf="conf"></div> 
     </div> 
    </form> 
    <pre>{{data|json}}</pre> 
</body>

controller e campo di direttiva:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.data = {name: '', age: ''} 
    $scope.config = [ 
     {field: 'name', required:true}, 
     {field: 'age'} 
    ]; 
}); 

app.directive('field', function ($compile) { 
    return { 
     scope: { 
      data: '=', 
      conf: '=' 
     }, 
     link: function linkFn(scope, element, attrs) { 
      // field container 
      var row = angular.element('<div></div>'); 

      // label 
      row.append(scope.conf.field + ': '); 

      // field input 
      var field = angular.element('<input type="text" />'); 
      field.attr('name', scope.conf.field); 
      field.attr('ng-model', 'data.' + scope.conf.field); 
      if (scope.conf.required) { 
       field.attr('required', 'required'); 
      } 
      row.append(field); 

      // validation 
      if (scope.conf.required) { 
       var required = angular.element('<span>required</span>'); 
       required.attr('ng-show', 
        'form.' + scope.conf.field + '.$error.required'); 
       row.append(required); 
      } 

      $compile(row)(scope); 
      element.append(row); 
     } 
    } 
});

problema è che la convalida per il campo name non funziona e testo di convalida required non viene mai mostrata. Può essere form in ng-show è sconosciuto nella direttiva. Ma non so come passare dalla forma alla direttiva sul campo. Puoi aiutarmi a risolverlo? Grazie.

qui è il codice dal vivo: http://plnkr.co/edit/j0xc7iV1Sqid2VK6rMDF?p=preview

fonte

2013-05-03 MarekLi

sto combattendo con lo stesso problema. Ho trovato una funzione non documentata nel sorgente angolare: 'FormController' ha metodi' $ addControl' e '$ removeControl'. Sto pensando di attingere a questi metodi per aggiungere dinamicamente i controlli al 'FormController padre 'dalla direttiva. Ti farò sapere se ho successo. –

Avrete bisogno di usare ng-form directive e spingere il campo dinamico direttamente in oggetto form.

Questo thread può aiutarti: https://github.com/angular/angular.js/issues/1404

fonte

2013-07-23 14:12:39

Todo:

prima:

$compile(row)(scope); 
element.append(row);

dopo:

element.append(row); 
$compile(row)(scope);

p/s in 'Planker' per gli impianti aggiungere css:

.ng-invalid { 
    border: 1px solid red; 
}

fonte

2013-12-10 12:47:22 Vladimir

Anche se molto oscuro, questa è in realtà una risposta. Dovrebbe essere accettato AL PIÙ PRESTO – incarnate

Ecco un plunker biforcuta dalla tua per risolvere voi sono problema: http://plnkr.co/edit/qoMOPRoSnyIdMiZnbnDF?p=preview

In sintesi, ho aggiunto un guarda che cambierà il messaggio di errore invece di usare la direttiva ng-show. Le cose possono diventare difficili quando si tenta di aggiungere dinamicamente una direttiva all'interno di un collegamento di direttiva. Per un caso d'uso semplice come questo, è più veloce aggiungere il proprio orologio.

Si può anche guardare questa direttiva, che è preconfigurato per gestire molti casi d'uso per la convalida e permetterà di creare le convalide personalizzati facilmente https://github.com/nelsonomuto/angular-ui-form-validation

var toggleRequiredErrorMessage = function (invalid) { 
    if(invalid === true) { 
     addRequiredErrorMessage(); 
    } else { 
     removeRequiredErrorMessage(); 
    } 
}; 
scope.$watch(watchIfRequired, toggleRequiredErrorMessage);

fonte

2014-06-23 17:08:53 nelsonomuto

Come convalidare i campi dei moduli dinamici nella direttiva angolare?

risposta

Problemi correlati