Angular - Form validation issues when using form input directive

Question

Angular - Form validation issues when using form input directive

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.

angularjs
validation

Answer 1

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