Dynamische Validierung und Name in einer Form mit AngularJS

Ich habe dieses Formular: http://jsfiddle.net/dfJeN/

Wie Sie sehen können, ist der Namenswert für die Eingabe statisch festgelegt:

name="username"

funktioniert die Formularüberprüfung einwandfrei (etwas hinzufügen und den gesamten Text aus der Eingabe entfernen, ein Text muss erscheinen).

Dann versuche ich, den Namenswert dynamisch festzulegen : http://jsfiddle.net/jNWB8/

name="{input.name}"

Dann wende ich dies auf meine Validierung an

login.{{input.name}}.$error.required

(Dieses Muster wird in einer ng-Wiederholung verwendet), aber meine Formularvalidierung ist fehlerhaft. Es wird in meinem Browser korrekt interpretiert (wenn ich das Element inspiziere, sah ich login.username. $ Error.required).

Irgendeine Idee ?

BEARBEITEN: Nach dem Protokollieren des Bereichs in der Konsole scheint es, dass die

{{input.name}}

Ausdruck ist nicht interpoliert. Mein Formular als {{input.name}} Attribut, aber kein Benutzername.

UPDATE: Seit 1.3.0-rc.3 funktioniert name = "{{input.name}}" wie erwartet. Bitte siehe # 1404

Sie können nicht das tun, was Sie versuchen.

Angenommen, Sie möchten einem Formular dynamisch Elemente hinzufügen, beispielsweise mit einer ng-Wiederholung. Sie müssen ein verschachteltes ng-Formular verwenden , um die Validierung dieser einzelnen Elemente zu ermöglichen:

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

Leider ist es keine gut dokumentierte Funktion von Angular.

Mit verschachteltem ngForm können Sie über die HTML-Vorlage auf den spezifischen InputController zugreifen. Wenn Sie jedoch von einem anderen Controller aus darauf zugreifen möchten, hilft dies nicht.

z.B

<script>
  function OuterController($scope) {
    $scope.inputName = 'dynamicName';

    $scope.doStuff = function() {
      console.log($scope.formName.dynamicName); // undefined
      console.log($scope.formName.staticName); // InputController
    }
  }
</script>

<div controller='OuterController'>
  <form name='myForm'>
    <input name='{{ inputName }}' />
    <input name='staticName' />
  </form>
  <a ng-click='doStuff()'>Click</a>
</div>

Ich benutze diese Richtlinie, um das Problem zu lösen:

angular.module('test').directive('dynamicName', function($compile, $parse) {
  return {
    restrict: 'A',
    terminal: true,
    priority: 100000,
    link: function(scope, elem) {
      var name = $parse(elem.attr('dynamic-name'))(scope);
      // $interpolate() will support things like 'skill'+skill.id where parse will not
      elem.removeAttr('dynamic-name');
      elem.attr('name', name);
      $compile(elem)(scope);
    }
  };
});

Jetzt verwenden Sie dynamische Namen überall dort, wo sie benötigt werden, nur das Attribut 'dynamischer Name' anstelle des Attributs 'Name'.

z.B

<script>
  function OuterController($scope) {
    $scope.inputName = 'dynamicName';

    $scope.doStuff = function() {
      console.log($scope.formName.dynamicName); // InputController
      console.log($scope.formName.staticName); // InputController
    }
  }
</script>

<div controller='OuterController'>
  <form name='myForm'>
    <input dynamic-name='inputName' />
    <input name='staticName' />
  </form>
  <a ng-click='doStuff()'>Click</a>
</div>

Das Problem sollte in AngularJS 1.3 gemäß dieser Diskussion über Github behoben werden .

In der Zwischenzeit ist hier eine temporäre Lösung, die von @caitp und @Thinkscape erstellt wurde :

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

Nizza von @EnISeeK .... aber ich habe es eleganter und weniger aufdringlich für andere Richtlinien:

.directive("dynamicName",[function(){
    return {
        restrict:"A",
        require: ['ngModel', '^form'],
        link:function(scope,element,attrs,ctrls){
            ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName;
            ctrls[1].$addControl(ctrls[0]);
        }
    };
}])

Nur eine kleine Verbesserung gegenüber der 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 ein Plunker-Prozess . Hier ist eine detaillierte Erklärung

Ich erweitere die @ caitp- und @ Thinkscape-Lösung ein wenig, um dynamisch erstellte verschachtelte ng-Formulare wie folgt zu ermöglichen :

<div ng-controller="ctrl">
    <ng-form name="form">
        <input type="text" ng-model="static" name="static"/>

        <div ng-repeat="df in dynamicForms">
            <ng-form name="form{{df.id}}">
                <input type="text" ng-model="df.sub" name="sub"/>
                <div>Dirty: <span ng-bind="form{{df.id}}.$dirty"></span></div>
            </ng-form>
        </div>

        <div><button ng-click="consoleLog()">Console Log</button></div>
        <div>Dirty: <span ng-bind="form.$dirty"></span></div>
    </ng-form>      
</div>

Hier ist meine Demo zu JSFiddle .

Ich habe die Lösung von Ben Lesh verwendet und sie funktioniert gut für mich. Ein Problem, mit dem ich konfrontiert war, war, dass beim Hinzufügen eines inneren Formulars mit ng-formalle Formularzustände, z. B. form.$valid, form.$errorusw., undefiniert wurden, wenn ich die ng-submitDirektive verwendete.

Wenn ich das zum Beispiel hätte:

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

Daher musste ich zum Senden des Formulars wieder ein reguläres Klickereignis verwenden. In diesem Fall muss das Formularobjekt übergeben werden:

<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 die überarbeitete Controller-Methode:

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

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

Dieses Problem wurde in Angular 1.3+ behoben. Dies ist die richtige Syntax für das, was Sie versuchen:

login[input.name].$invalid

wenn wir einen dynamischen Namen für eine Eingabe wie die folgende festlegen

<input name="{{dynamicInputName}}" />

Dann haben wir die Set-Validierung für dynamische Namen wie den folgenden Code verwendet.

<div ng-messages="login.dynamicInputName.$error">
   <div ng-message="required">
   </div>
</div>