Question

我的表格如下

<ng-form name="TestForm" novalidate class="TestCls">
 <div class="testValidation">
     <input type="text" name="FirstName" ng-model="FirstName" ng-required="true" />
     <input type="button" value="Click" ng-disabled="TestForm.$invalid"/>
 </div>
</ng-form>

另外，我使用javascript代码添加了一个输入元素，如下所示

var content = "<input type='text' name='LastName' ng-model='LastName' ng-required='true'/>";
var temp = $compile(content)($scope);
$("testValidation").append(temp);
$scope.$apply();

添加上述元素后，生成的表单将如下

<ng-form name="TestForm" novalidate class="TestCls">
     <div class="testValidation">
         <input type="text" name="FirstName" ng-model="FirstName" ng-required="true" />
       <input type="text" name="LastName" ng-model="LastName" ng-required="true" />
         <input type="button" value="Click" ng-disabled="TestForm.$invalid"/>
     </div>
    </ng-form>

现在问题是在将内容添加到“FirstName”字段后启用了“单击”按钮。还有一个必填字段ie.LastName必须采用一些值。

ng-valid类被添加到“TestForm”表单中，即使ng-invalid类附加到“LastName”输入元素。

似乎，动态添加元素的验证不能用于ng-form。

在我的要求中，只有在“FirstName”和“LastName”都添加了一些值后才能启用表单。

Answer 1

首先尝试将元素添加到DOM树中，然后编译并链接它：

var content = angular.element("<input type='text' name='LastName' ng-model='LastName' ng-required='true'/>");
$("testValidation").append(content);
$compile(content)($scope);

验证指令可能需要引用表单（require：^ form），这意味着它应该在编译和链接之前首先连接到DOM。

表格有效（ng-valid），即使其中一个输入元素无效（ng-invalid）

1 个答案: