Проверка формы, когда директива динамически создает входные данные формы

Question

Я пытаюсь проверить форму при использовании директивы. Директива создает входные данные формы путем компиляции и замены элемента.

Если я использую простой шаблонный вариант директивы, он отлично работает. Если вход, созданный директивой, является недопустимой, также недействителен. Она работает даже при создании в цикле, а также: 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> 

приложение и контроллер:

var app = angular.module('app', []); 


app.controller('MainCtrl', function ($scope) { 
    $scope.sendForm = function() { 
     if ($scope.myform.$valid) { 
      alert('form valid'); 
     } 
    }; 
});   

Вот простой рабочий вариант директивы:

app.directive('myinput', function() { 
     return { 
      restrict: 'E', 
      template: '<label>Test</label><input ng-model="value" type="text" required ng-minlength="5" />' 
     }; 
    }); 

Но если Я изменяю директиву для использования функции ссылки и компилирую ее, даже если вход внутри директивы недействителен, формы $ valid по-прежнему верны: 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:

Директива может создать свою собственную 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"); 
       });       
      }      

    }; 
}); 

Но его, вероятно, не правильный подход к этой конкретной проблемы.

Answer 1

Вы должны переключить replaceWith и $compile (DEMO):

element.replaceWith(newElement); 
$compile(newElement)(scope); 

Я думаю, это потому, что вы не можете скомпилировать элемент, который еще не в DOM. Но я не уверен.