AngularJS - How to compile inputs inside form?

Question

I have a form declared in the html file. The inputs are generated dynamically.

That means, they are built as strings in javascript and then compiled inside a custom directive in angular.

app.directive('customInput', function($compile){
return{
  restrict: 'E',
  scope: true,
  link: function(scope, element, attrs){
    var html = "<input type='text' ng-model='tCtrl.test[$index]' ng-required='required' ng-maxlength='3'/>";
    var el = $compile(html)(scope);
    element.html("");
    element.append(el);
  }
}
});

They work fine with my angular code, but the problem is: They are not "recognized" as part of my form. That means, the parent FORM element does not change it's $pristine, $error, etc, status when inputs are modified.

How can I have the compiled inputs be treated as part of the form?

This plunkr is an example of the problem I'm having:

http://plnkr.co/edit/tR7loK45wXEFcBIsDeur?p=preview

what's the point for doing this in the first place? This doesn't feel like a very angular way of designing a page at all. In this example, at least, your HTML string doesn't appear to have anything unique that couldn't be supplied in a template. There are many ways of "dynamically generating HTML" with angular that don't involve element.append. — Claies
– Claies, Commented Aug 15, 2015 at 1:57
That's because it's an example. What I intend to do is to create a tool where you define your inputs in a json, and the tool mounts the html for the CRUD operations. — Aleksandrus
– Aleksandrus, Commented Aug 15, 2015 at 2:00
you mean something like this? github.com/Textalk/angular-schema-form — Claies
– Claies, Commented Aug 15, 2015 at 2:01
yes, but I want to implement my own, where I define like this {name: 'phone_number', label: 'Phone number', show: true, edit: true, description: ['phone', 'required', ...]} — Aleksandrus
– Aleksandrus, Commented Aug 15, 2015 at 2:03
well, I'm pretty sure that project lets you define custom schemas, but if it doesn't, I would probably start with their code to see how they have done the dynamic form attachments. — Claies
– Claies, Commented Aug 15, 2015 at 2:04

harishr · Accepted Answer · 2015-08-15 05:20:52Z

2

what you are doing is putting the element on dom after compiling it, and hence the ngmodel does not get a chance to hookup itself to the parent form.

what you are doing is:

1. create & compile element
2. place it in dom

as element is already compiled before making it to the dom.. it would never know of its parent form and hence wont link itself to the parent.

the sequence of step should have been:

1. create an element, 
2. place it in dom 
3. compile it. // now it will have a chance to hook up to the parent

so what you should rather do is:

   var el =angular.element('your html');
   element.append(el);
   $compile(el)(scope);

edited Aug 15, 2015 at 5:20

answered Aug 15, 2015 at 5:08

harishr

18.1k9 gold badges84 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleksandrus Over a year ago

Fantastic!! Worked like a charm, and it was a very well explained!

Collectives™ on Stack Overflow

AngularJS - How to compile inputs inside form?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related