Validating form when directive creates form inputs dynamically - angularjs

Question

I am trying to validate form while using directive. The directive creates form inputs by compiling and replacing the element.
If I use simple template version of directive it works fine. If the input created by directive is invalid form is also invalid. It even works when created in a loop as well : http://codepen.io/kuasha/pen/gbreKP
<div ng-app="app" ng-controller="MainCtrl">
<form name="myform" ng-submit="sendForm()" novalidate>
<div class="form-group">
<myinput />
</div>
<div class="form-group">
<button ng-show="myform.$valid" type="submit">Submit!</button>
</div>
</form>
</div>
The app and controller:
var app = angular.module('app', []);
app.controller('MainCtrl', function ($scope) {
$scope.sendForm = function () {
if ($scope.myform.$valid) {
alert('form valid');
}
};
});
Here is the simple working version of the directive:
app.directive('myinput', function () {
return {
restrict: 'E',
template: '<label>Test</label><input ng-model="value" type="text" required ng-minlength="5" />'
};
});
But if I change the directive to use a link function and compile then, even when the input inside the directive is invalid, forms $valid is still true: http://codepen.io/kuasha/pen/qEZoKv?editors=101
app.directive('myinput', function ($compile) {
return {
restrict: 'E',
link: function (scope, element, attributes) {
var template = '<div><input type="text" required ng-minlength=5 /></div>'
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
};
});
Edit:
Directive could create its own validator-
app.directive('myinput', function ($compile) {
return {
require:'^form',
restrict: 'E',
scope: {
},
controller: ['$scope', function($scope){
}],
link: function (scope, element, attributes, ctrl) {
var template = '<label>Test</label><input name="myctrl" ng-model="value" type="text" required ng-minlength="5" />'
var newElement = angular.element(template);
$compile(newElement)(scope);
element.replaceWith(newElement);
scope.$watch("value", function(){
ctrl.$setValidity('myctrl', scope.value && scope.value.length > 0);
console.log("Validity set");
});
}
};
});
But its probably not right approach for this particular problem.

Answer 1

You should switch the replaceWith and $compile (DEMO):
element.replaceWith(newElement);
$compile(newElement)(scope);
I think it is because you can't really compile an element that is not yet in the DOM. But I'm not sure.