Angular - Form validation issues when using form input directive

Question

I have been trying to build a form input directive which will generate a form input based on the model and the model attributes . For example,

if the field is name and type is text, the directive will return a input html control,
if the field is a list, then it will return a select box and so on

These inputs are generated using ng-repeat in the view. The inputs are bound to the model in the scope. This is working fine. However, the form validation fails; i.e if the input controls are invalid, the main form still shows the form is valid.

I have put up a simple plunkr to illustrate the issue - http://plnkr.co/edit/R3NTJK?p=preview

NOTE : I have actually nested the form, as the input name field is also dynamically generated from the scope model.

I have been trying to a get hold on this from the past 2 days and this is really driving me nuts.

I m not sure if I m missing something.

I would really appreciate if some one could help me out with this.

Mark Rajcok · Accepted Answer · 2013-04-12 14:33:19Z

2

Update: Use the following link function:

link: function linkFn(scope,elem,attr){
   var jqLiteWrappedElement = 
       angular.element('<input type="url" name="socialUrl" ng-model="social.url">');
   elem.replaceWith(jqLiteWrappedElement);
   $compile(jqLiteWrappedElement)(scope);
}

Plunker.

For reasons I don't understand, the replaceWith() must be executed before the call to $compile. If someone can explain why this is so, we'd appreciate it!

Update2: in the comments below, Artem mentioned that the DOM must be modified before the linking function is called, so this also works:

var myElem = angular.element('some html');
var linkFn = $compile(myElem);
element.replaceWith(myElem);
linkFn(scope);

Original answer:

Instead of the link function, just use a template in your directive:

template: '<input type="url" name="socialUrl" ng-model="social.url">'

edited Apr 12, 2013 at 14:33

answered Mar 15, 2013 at 16:09

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

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

6 Comments

Gautham Over a year ago

Thanks for the input. But, I need to generate the template dynamically based on scope i.e template can be input- text/radio/checkbox, select, datepicker etc. based on the field type available in scope. In such a case, I cannot hardcode the template string and need to generate it using the link function which has access to the scope.

Mark Rajcok Over a year ago

@Gautham, I figured out how to make it work in the link function, but I don't fully understand why. See updated answer.

Artem Over a year ago

@MarkRajcok, hi. Thanks for your answer. I've faced similar problem and your solution works fine. But I'm curious, did you figured out why replaceWith must be called before $compile?

Mark Rajcok Over a year ago

@Artem, no I still don't know why.

Artem Over a year ago

@MarkRajcok, ok I just figured out that it's not about compile itself. It's about liking scope to compiled DOM subtree. $compile without linking before replaceWith works too. gist.github.com/armed/5369236

|

Collectives™ on Stack Overflow

Angular - Form validation issues when using form input directive

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related