javascript - 表单有效(ng-valid)，即使它的输入元素之一无效(ng-invalid)

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”字段后启用了“Click”按钮。还有一个必填字段，即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。