Javascript 表格验证自；减去；动态添加div时，文件不工作

我有一个

.less

文件，里面有一个

表单validate

类。当输入类型设置为

url

，并且输入了无效的url时，边框变为红色

正常情况下，它可以工作，但当我动态添加元素时，它就不能工作了

.less

文件来自一个模板，我对它了解不多。 我通过单击按钮动态添加

input

元素

我已经将

表单validate

添加到作为父级的表单中

$("#panelHolder").html('<input type="url" name="hostUrl" id="hostUrl" ng-model="hostUrl" placeholder="http://" class="form-control "/>');

---

更新：提交表单时，我也无法读取控制器中这些元素的值。

可能是因为检查没有附加到元素上？一个JSFIDLE将很好地为您的解决方案工作。（ps您在

.html'中忘记了一个括号，我刚刚意识到，我也无法从这些元素中读取值！@Gomzy补充道。我想这是因为其他原因。我无法在我的控制器中获取这些动态添加的元素的值。
<form name="myForm" class="form-validate " data-ng-submit="create(myForm.$valid)"
      novalidate>
    <script>
        function showPanel1()
        {
            $("#servicePanelHolder").html('<div id="panel1" class="controls"><div class="form-group"><label class="control-label">Host</label><input type="url" form="syncForm" name="hostUrl" id="hostUrl" ng-model="hostUrl" placeholder="http://"class="form-control "/><span ng-show="form.validateInput(\'url\', \'url\')"></span></div></div>');
        }
        function showPanel2()
        {
            $("#servicePanelHolder").html('<div id="panel2" class="controls"><div class="form-group"><label class="control-label">Access Key</label><input type="text" name="accessKey" id="accessKey" ng-model="accessKey" class="form-control "/></div><div class="form-group"><label class="control-label">Secret Access Key</label><input type="text" name="secretKey" id="secretKey" ng-model="secretKey"class="form-control "></div></div>');
        }

    </script>
    <div class="panel-body">
        <div class="form-group">
            <label class="control-label">Name</label>
            <input type="text" name="name" id="name" ng-model="name" class="form-control "/>
        </div>

        <legend>Service</legend>

        <div class="row form-group">
            <label class="radio-inline c-radio ">
                <input type="radio" name="type" value="Panel1"
                       checked="" ng-model="type"
                       onchange="showPanel1()"/>
                <span class="fa fa-circle"></span>Panel 1</label>

            <label class="radio-inline c-radio">
                <input type="radio" name="type" value="Panel2"
                       ng-model="type"
                       onchange="showPanel2()"/>
                <span class="fa fa-circle"></span>Panel 2</label>
        </div>

    </div>

    <div class="panel-body" id="servicePanelHolder">


    </div>

    <div class=" mt">
        <input type="submit" class="mb-sm btn btn-primary">
    </div>
</form>