пытается создать динамически составленную форму.
Поля и атрибуты поступают с сервера.Angular должен получить их и сгенерировать форму.
Я решил использовать директиву и компиляцию во время выполнения.
В основном все работает, кроме нескольких вещей.
Проблема: $ valid isundefined для скомпилированных полей.
Для статических полей это работает.
Пожалуйста, дайте мне совет.
app = angular.module('dyno', []);
app.controller("fieldCompilation", function($scope) {
$scope.list = [{
id: "0",
name: "A"
},
{
id: "1",
name: "B"
},
{
id: "2",
name: "C"
},
];
});
app.directive("otcDynamic", function($compile) {
return {
link: function(scope, element) {
// Add Text Input with pattern validation and required attr
var template = "<input type='text' name='input3' ng-model='input3' placeholder='input3 [0-9]{2} required' pattern='[0-9]{2}' required='true'/>";
var linkFn = $compile(template);
var content = linkFn(scope);
angular.element(document.getElementById("f3")).append(content);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<div ng-app="dyno">
<div ng-controller="fieldCompilation">
<br><b> Static Input:</b>
<ng-form name="form1">
<div id="f1">
1. Input <input type='text' name='input1' ng-model='input1' placeholder='input1 [0-9]{2} required' pattern='[0-9]{2}' required='true' /><br>
</div>
<br><b> Dynamic Inputs:</b>
<div otc-dynamic>
<div id="f3">
3. Input
</div>
</div>
<br> <b>Details</b>
<div>
Counter: {{ message }}
</div>
<div>
Model Input1: {{ input1 }}
</div>
<div>
Model input3: {{ input3 }}
</div>
<div>
Validation input1: {{ form1.input1.$valid }}<br> Validation input3: {{ form1.input3.$valid }}<br> Validation form1: {{ form1.$valid }}<br>
</div>
</ng-form>
</div>
</div>
Скрипка