Dynamic validation and name in a form with AngularJS

I have this form : http://jsfiddle.net/dfJeN/

As you can see the name value for the input is statically set :

name="username"

, the form validation works fine (add something and remove all text from the input, a text must appears).

Then I try to dynamically set the name value : http://jsfiddle.net/jNWB8/

name="{input.name}"

Then I apply this to my validation

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

(this pattern will be used in an ng-repeat) but my form validation is broken. It is correctly interpreted in my browser (if I inspect the element I saw login.username.$error.required).

Any Idea ?

EDIT: After logging the scope in the console it appears that the

{{input.name}}

expression is not interpolate. My form as an {{input.name}} attribute but no username.

UPDATE: Since 1.3.0-rc.3 name="{{input.name}}" works as expected. Please see #1404

You can't do what you're trying to do that way.

Assuming what you're trying to do is you need to dynamically add elements to a form, with something like an ng-repeat, you need to use nested ng-form to allow validation of those individual items:

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

Sadly, it's just not a well-documented feature of Angular.

Using nested ngForm allows you to access the specific InputController from within the HTML template. However, if you wish to access it from another controller it does not help.

e.g.

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

I use this directive to help solve the problem:

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

Now you use dynamic names wherever is needed just the 'dynamic-name' attribute instead of the 'name' attribute.

e.g.

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

The problem should be fixed in AngularJS 1.3, according to this discussion on Github.

Meanwhile, here's a temporary solution created by @caitp and @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 on JSFiddle.

Nice one by @EnISeeK.... but i got it to be more elegant and less obtrusive to other 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]);
        }
    };
}])

Just a little improvement over EnlSeek solution

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

Here is a plunker trial. Here is detailed explantion

I expand the @caitp and @Thinkscape solution a bit, to allow dynamically created nested ng-forms, like this:

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

Here is my demo on [JSFiddle][2].

[2]: http://jsfiddle.net/gstabel/Tzp7a/ "JSFiddle"

I used Ben Lesh's solution and it works well for me. But one problem I faced was that when I added an inner form using ng-form, all of the form states e.g. form.$valid, form.$error etc became undefined if I was using the ng-submit directive.

So if I had this for example:

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

And in the my controller:

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

So I had to go back to using a regular click event for submitting the form in which case it's necessary to pass the form object:

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

And the revised controller method:

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

I'm not quite sure why this is but hopefully it helps someone.

This issue has been fixed in Angular 1.3+ This is the correct syntax for what you are trying to do:

login[input.name].$invalid

> if we set dynamic name for a input like the below

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

> then we have use set validation for dynamic name like the below code.

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