Dynamische Validierung und Name in einem Formular mit AngularJS

Können Sie nicht tun, was Sie versuchen zu tun, Weg.

Vorausgesetzt, was Sie zu tun versuchen ist, dass Sie brauchen, um dynamisch hinzufügen von Elementen zu einem Formular, mit so etwas wie ng-repeat, müssen Sie die Verwendung von verschachtelten ng-form zu ermöglichen, die Validierung der einzelnen Elemente:

<form name="outerForm">
<div ng-repeat="item in items">
   <ng-form name="innerForm">
      <input type="text" name="foo" ng-model="item.foo" />
      <span ng-show="innerForm.foo.$error.required">required</span>
   </ng-form>
</div>
<input type="submit" ng-disabled="outerForm.$invalid" />
</form>

Traurig, es ist eben nicht eine gut dokumentierte Funktion Angular.

InformationsquelleAutor der Antwort Ben Lesh

Sollte das problem behoben sein AngularJS 1.3, nach dieser Diskussion über Github.

Zwischenzeit, hier ist eine temporäre Lösung erstellt durch @caitp und @Thinkscape:

//Workaround for bug #1404
//https://github.com/angular/angular.js/issues/1404
//Source: http://plnkr.co/edit/hSMzWC?p=preview
app.config(['$provide', 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;
    });
}]);

Demo auf JSFiddle.

InformationsquelleAutor der Antwort Paolo Moretti

Nur eine kleine Verbesserung über EnlSeek Lösung

angular.module('test').directive('dynamicName', ["$parse", function($parse) {
 return {
    restrict: 'A',
    priority: 10000, 
    controller : ["$scope", "$element", "$attrs", 
           function($scope, $element, $attrs){
         var name = $parse($attrs.dynamicName)($scope);
         delete($attrs['dynamicName']);
         $element.removeAttr('data-dynamic-name');
         $element.removeAttr('dynamic-name');
          $attrs.$set("name", name);
    }]

  };
}]);

Hier ist eine Studie plunker. Hier ist eine detaillierte Erklärung der

InformationsquelleAutor der Antwort jason zhang

Benutzte ich Ben Lesh die Lösung und es funktioniert gut für mich. Aber ein problem, das ich konfrontiert war, wenn ich fügte hinzu, eine innere form mit ng-form alle Staaten Formen z.B. form.$valid, form.$error etc wurde undefiniert, wenn ich mit den ng-submit Richtlinie.

Also, wenn ich mir dieses zum Beispiel:

<form novalidate ng-submit="saveRecord()" name="outerForm">
    <!--parts of the outer form-->
    <ng-form name="inner-form">
      <input name="someInput">
    </ng-form>
    <button type="submit">Submit</button>
</form>

Und in meinem controller:

$scope.saveRecord = function() {
    outerForm.$valid //this is undefined
}

Also ich musste gehen Sie zurück, um mit einem normalen click-Ereignis für die Einreichung das Formular in welchem Fall es notwendig ist, übergeben Sie das Formular-Objekt:

<form novalidate name="outerForm">  <!--remove the ng-submit directive-->
    <!--parts of the outer form-->
    <ng-form name="inner-form">
      <input name="someInput">
    </ng-form>
    <button type="submit" ng-click="saveRecord(outerForm)">Submit</button>
</form>

Und der überarbeitete controller-Methode:

$scope.saveRecord = function(outerForm) {
    outerForm.$valid //this works
}

Ich bin mir nicht ganz sicher, warum das ist, aber hoffentlich hilft es jemanden.

InformationsquelleAutor der Antwort sq1020