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

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 包装它并在<general> 中使用ng-form 的有效性：

<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的有效性。

如果两种解决方案都不起作用（我看不出原因），您始终可以创建一个指令，将其相邻形式的有效性发布到父范围内的变量。在父作用域中使用变量比较棘手，相信前面的解决方案应该够用了，不再赘述。它可以调用回调函数，而不是变量 - 期待更少的惊喜。