<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function ($scope, $compile) {
$scope.createField = function () {
var lname = '<label>LastName : </label><input type="text" name="last" ng-model = "last" required/> Valid: {{myForm.last.$valid}}<br>';
var tdiv = document.createElement("div");
tdiv.innerHTML = lname;
$compile(tdiv)($scope);
document.getElementById("container").appendChild(tdiv);
}
});
</script>
<body>
<h2>Dynamic Element Creation Example</h2>
<form ng-app="myApp"
ng-controller="validateCtrl"
name="myForm">
<div id="container">
Firstname : <input type="text" name="first" ng-model="first" required/>
Valid: {{myForm.first.$valid}} [ Here the element state is displayed correctly, but when adding elements dynamically with the create button, the validation status is not showing. ]
</div>
<button type="button" ng-click="createField();" value="Create">Create</button>
</form>
</body>
</html>
In this example, the element validation state is shown correctly. However, when adding elements dynamically with the create button, the validation status is not displayed.