Dynamic validation and name in a form with AngularJS

Question

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

Maryettamaryjane

After some research I found this : "Once scenario in which the use of ngBind is prefered over {{ expression }} binding is when it's desirable to put bindings into template that is momentarily displayed by the browser in its raw state before Angular compiles it". In this page docs.angularjs.org/api/ng.directive:ngBind, it seems to be a good start for what I am trying to do. This post will be updated if I find a solution. – Maryettamaryjane

There is an opened github issue github.com/angular/angular.js/issues/1404 – Honorable

Have any of the answers solved your problem. If so, please mark it as the answer by clicking on the ckeckmark bellow its score. – Indelicate

Here is a blog article that will likely be of some help to others who come across this issue: thebhwgroup.com/blog/2014/08/angularjs-html-form-design-part-2 – Stavanger

Answer 1

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.

Arduous

how did you end up solving this in the end? I still don't see how this particular answer relates to your problem - as it doesn't show dynamically generated form fields and names? – Amplification

This is a complete solution (or workaround) and the suggested approach by the angular team (from docs.angularjs.org/api/ng.directive:form): "Since you cannot dynamically generate the name attribute of input elements using interpolation, you have to wrap each set of repeated inputs in an ngForm directive and nest these in an outer form element." Each nested form has its own scope which allows this to work. – Flashback

This example and suggestion still don't address the dynamic "name". It looks like they want to allow you to nest dynamically 'cloned' sets of fields but the underlying name of each field must be static. – Bangweulu

@Bangweulu Yes it does help. With this solution the name doesn't need to be dynamic. It can be anything you like (like "foo"). The point is the child form has it's own scope, so validation expressions can just refer to innerForm.foo.$error etc. The ng-model can then point to whatever you want it to in the parent scope (possibly dynamically). – Figured

@Bangweulu - Wintamute is right. There is no need for dynamic names, since you're not submitting the form directly. The intention is to alter some model, then POST that via Ajax. dynamic names aren't going to by you anything at that point. If you're actually using an HTML form submit, you're doing something weird/wrong, and you'll need a different approach. – Arduous

@Ben How do you handle checkbox or radio lists if you cannot have dynamic names? The names are required for tying the form inputs together (e.g. one radio button click does not affect radio buttons in a different list). – Anadiplosis

@Whitelaw you'd use the same approach, making sure that each radiobutton or checkbox is in it's own ng-form directive. This way they can all have the same name, without trampling each others' validation. – Arduous

This solution work in this case but it is not perfect. I am doing a application with very generic form described by Json data. My form can be nested (a form inside another form) in this case a field defined on a sub ng-form will be present on the parent ng-form too ! I think I am going to try @EnISeeK solution. – Pocky

After a long time trying to fix my issue with validation, I finally found this post. This needs to go in to the new documentation section of SO! Thanks a lot – Entomo

Answer 2

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>

Alvord

I used this solution with the exception of using $interpolate instead of $parse, felt more useful – Orbital

i see you do termial:true. What does that mean? Can I use this directive on forms aswell, like <form ng-repeat="item in items" dynamic-name="'item'+item.id"> ... <span ng-show="item{{item.id}}.$invalid">This form is invalid</span></form> ? – Dao

Answer 3

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.

Grovergroves

For those stuck on ng 1.2, this is easily the least 'hacky' fix. – Hardness

Answer 4

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

Insidious

I would only add following. ctrls[0].$name = scope.$eval(attrs.dynamicName) || attrs.dynamicName; – Malita

Answer 5

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

Salim

+1, EnlSeek's directive was causing an infinite loop in my directive; I had to remove the 'fx' pieces of this answer to get it to work, though – Nonparticipating

The priority can interfere with a set of fields that would assume the same name but have ng-if. e.g.: <input type='text' dynamic-name='foo' ng-if='field.type == "text" /> <textarea dynamic-name='foo' ng-if='field.type == "textarea"></textarea> Removing the 'priority: 10000' solved the problem for me and still appears to function correctly. – Bangweulu

ngIf has priority 600. Assign a priority less than 600 for this directive should make it work together with ngIf. – Salim

If no priority is set(default to 0), it may work with ngModel (priority 0) if this directive is evaluated before ngModel. You want to give it a priority so that it is always before ngModel is compiled/linked. – Salim

Answer 6

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.

Owens

Answer 7

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.

Rattlebrain

Answer 8

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

Thinia

Answer 9

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>

Crashing