Question

我有一个.less个文件，其中包含form-validate个类。如果输入类型设置为url，并且输入了无效的网址，则边框将变为红色。

通常它可以工作，但是当我动态添加元素时，它不会。

.less文件来自模板，我对此并不了解。我在点击按钮时动态添加input元素。

我已将form-validate添加到父级表单中。

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

如果在panelHolder中直接添加相同的代码，则可以正常使用。

<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>

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

form-validate from＆＃34; less＆＃34;动态添加div时文件无效

0 个答案: