javascript - AngularJS 表单 $valid 在验证完成之前设置为 true

Question

我在页面的左侧导航栏中显示一个验证符号，以指示表单是否有效。当我最初加载页面时，表单的 $valid 属性设置为 true，然后最终更改为 false(因为应该为它提供检索到的输入数据)。结果是我的验证符号从有效闪烁到无效。有什么办法可以防止这种情况发生吗？目前，验证符号绑定(bind)到 $scope 上的有效属性，该属性在 watch 内设置。是否可以将任何逻辑添加到 watch 中以检查表单是否尚未完成初始化或验证？谢谢!

这是我当前的 watch 代码。在几个不同的监视周期后，有效属性从未定义变为真再变为假。

$scope.$watch( 'sections.' + section.sectionName + '.sectionForm.$valid', function( valid ) {
    section.valid = valid;
}, true);

以及显示验证符号的 HTML:

<span ng-class="{ 'fa fa-check': section.valid,
    'fa fa-warning': !section.valid}">
</span>

Answer 1

我认为问题出在 $watch 函数上。第一次将“section.valid”设置为未定义。您无需手动观看。每个表单指令创建一个 FormController 的实例.因此，您可以直接在 View 中检查表单有效性。

<span ng-class="{'fa fa-check': sectionFormName.$valid, 'fa fa-warning': sectionFormName.$invalid}"></span>