AngularJS compile rendered name value in dynamic form

Question

I'm building a form dynamically in Angular.

All works great until I get to my validation directive.

This uses the form object to get the field name and apply styling to it to show errors in invalid fields.

However because it's dynamically set the name appears as {{field.name}} not the actual name rendered in the browser.

Here is my markup

<div class="form-group" ng-repeat="field in fields">
    <label class="text control-label col-sm-2" for="{{field.name}}">{{field.label}}</label>
    <div class="input-group col-sm-9" ng-switch="field.type">
        <input ng-switch-when="email" type="email" name="{{field.name}}"  class="form-control" id="{{field.name}}" placeholder="{{field.label}}" ng-model="field.value" required>

        <input ng-switch-when="text" type="text" name="{{field.name}}" class="form-control" id="{{field.name}}" placeholder="{{field.label}}"  ng-model="field.value" required>

        <select ng-switch-when="select" id="{{field.name}}" name="{{field.name}}" id="{{field.name}}" ui-select2="" ng-model="field.value" placeholder="{{field.label}}" required>
            <option></option>
            <option ng-repeat="option in field.options" value="{{option.value}}">{{option.label}}</option>
        </select>

        <p ng-switch-default>Need template for {{field.type}}</p>
    </div>

</div>

Here's where I check for errors in my directive

// go through every field
for(var errorType in form.$error)
{
    var fields = form.$error[errorType];
    // loop through all fields of this type
    for(var j = 0 ; j < fields.length ; j++)
    {
        var field = fields[j];
        console.log(field);
        var $field = element.find('[name='+field.$name+']');

        showErrors($field, field, errorType);
    }
}

And here are the properties for one of the invalid fields when logged out

...
$invalid: true
$isEmpty: function (value) {
$modelValue: ""
$name: "{{field.name}}"
$parsers: Array[1]
$pristine: true
...

So when I try to get hold of the field using var $field = element.find('[name='+field.$name+']'); it obviously doesn't work and I get a error...

   unrecognized expression: [name={{field.name}}]

How would I get around this and get the rendered name. I need this directive to work for forms that aren't dynamically created either (in which case it works fine).

So on initial rendering the name is set to the value of `field.name`? That works ok? It's hard check without seeing it in action. — Jorg, Jul 01 '14 at 23:29
check http://stackoverflow.com/questions/14378401/dynamic-validation-and-name-in-a-form-with-angularjs — Issam Zoli, Jul 01 '14 at 23:34

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

You have to use a directive:

myApp.directive("dynamicName",function($compile){
  return {
      restrict:"A",
      terminal:true,
      priority:1000,
      link:function(scope,element,attrs){
          element.attr('name', scope.$eval(attrs.dynamicName));
          element.removeAttr("dynamic-name");
          $compile(element)(scope);
      }
   };
});

Here is a fiddle.

Full answer here.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 01 '14 at 23:39

Issam Zoli

2,724
1
21
35

Still don't understand what terminal:true does in a directive though... I better read up. – markstewie Jul 02 '14 at 00:40

AngularJS compile rendered name value in dynamic form

1 Answers1