Validation dynamique et nom dans un formulaire avec AngularJS

Question

J'ai ce formulaire : http://jsfiddle.net/dfJeN/

Comme vous pouvez le voir, la valeur du nom de l'entrée est définie de manière statique :

name="username"

La validation du formulaire fonctionne bien (ajouter quelque chose et supprimer tout le texte de l'entrée, un texte doit apparaître).

J'essaie ensuite de définir dynamiquement la valeur du nom : http://jsfiddle.net/jNWB8/

name="{input.name}"

Ensuite, j'applique ceci à ma validation

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

(ce modèle sera utilisé dans un ng-repeat) mais la validation de mon formulaire ne fonctionne pas. Elle est correctement interprétée dans mon navigateur (si j'inspecte l'élément, je vois login.username.$error.required).

Une idée ?

EDIT : Après avoir enregistré le champ d'application dans la console, il s'avère que le fichier

{{input.name}}

L'expression n'est pas interpolée. Mon formulaire a un attribut {{input.name}} mais pas de nom d'utilisateur.

MISE À JOUR : depuis la version 1.3.0-rc.3, name="{{input.name}}" fonctionne comme prévu. Veuillez consulter #1404

Answer 1

Tu ne peux pas faire ce que tu essaies de faire de cette façon.

En supposant que ce que vous essayez de faire est d'ajouter dynamiquement des éléments à un formulaire, avec quelque chose comme un ng-repeat, vous devez utiliser des éléments imbriqués. ng-form pour permettre la validation de ces éléments individuels :

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

Malheureusement, ce n'est pas une fonctionnalité bien documentée d'Angular.

Answer 2

L'utilisation de ngForm imbriqués vous permet d'accéder au InputController spécifique à partir du modèle HTML. Toutefois, si vous souhaitez y accéder à partir d'un autre contrôleur, cela ne sert à rien.

par exemple

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

J'utilise cette directive pour aider à résoudre le problème :

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

Vous pouvez désormais utiliser des noms dynamiques partout où cela est nécessaire, en utilisant simplement l'attribut "dynamic-name" au lieu de l'attribut "name".

par exemple

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

Answer 3

Le problème devrait être corrigé dans AngularJS 1.3, selon cette discussion sur Github .

En attendant, voici une solution temporaire créée par @caitp et @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;
    });
}]);

Démonstration sur JSFiddle .

Answer 4

Une bonne idée de @EnISeeK.... mais j'ai réussi à la rendre plus élégante et moins gênante pour les autres directives :

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

Answer 5

Juste une petite amélioration par rapport à la solution EnlSeek

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

  };
}]);

Voici un essai de plunker . Voici une explication détaillée