Question

<div class="well">
  <div class="panel-title>
    <span class="fa fa-caret-right" ng-if="!showGeneral"></span>
    <span class="fa fa-caret-down" ng-if="showGeneral"></span>
  </div>
  <label>GENERAL</label>
  <div ng-if="generalFormName.$valid" class="pull-right">
     <i class="fa fa-check" style="color:#4cc94c;font-size:large;"></i>
  </div>
  <div class="panel-collapse" ng-if="showGeneral">
    <general></general>
  </div>
</div>

<div>
<form name="generalFormName" novalidate autocomplete="off">
    <input type="text" class="form-control align" required  ng-model="infor.name" />
</form>
</div>

指令general是另一个html。当用户填写该表格中的必填字段时，我需要在标签右侧显示一个复选标记。我没有任何按钮来提交和发送表单数据，然后检查验证。我formname.$valid时只需要一个复选标记。我添加了ng-if但由于某种原因我无法得到它。

有人可以帮我解决这个问题吗？会有很大帮助。

提前致谢。

Answer 1

Angular中的表单使其验证状态通过其名称可用，并且只对其范围和后代范围可用。目前，<general>指令超出了表单的范围，因此无法访问验证数据。最简单的解决方案是重新定位表单以包含输入和<general>指令：

<form name="generalFormName" novalidate autocomplete="off">
    <div class="well">
        ...
        <general></general>
        ...
    </div>

    <div>
        <input type="text" class="form-control align" required ng-model="infor.name" />
    </div>
</form>

如果<form>必须绝对保持原状，您可以使用ng-form打包并使用ng-form中的<general>有效期：< / p>

<div ng-form="ngFormName">
    <div class="well">
        ...
        <general valid="ngFormName.$valid"></general>
        ...
    </div>

    <div>
        <form name="generalFormName" novalidate autocomplete="off">
            <input type="text" class="form-control align" required ng-model="infor.name" />
        </form>
    </div>
</div>

内部generalFormName的有效性会影响包装器ngFormName的有效性。

如果两种解决方案都不起作用（我没有看到原因），您始终可以创建一个指令，将其相邻表单的有效性发布到父作用域中的变量。在父作用域中使用变量很棘手，我相信以前的解决方案应该足够了，所以我不会详细介绍。它可以调用一个回调函数而不是一个变量 - 期望更少的惊喜。

在div中动态检查表单完成情况

1 个答案: