<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
但由于某种原因我无法得到它。
有人可以帮我解决这个问题吗?会有很大帮助。
提前致谢。
答案 0 :(得分:0)
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
的有效性。
如果两种解决方案都不起作用(我没有看到原因),您始终可以创建一个指令,将其相邻表单的有效性发布到父作用域中的变量。在父作用域中使用变量很棘手,我相信以前的解决方案应该足够了,所以我不会详细介绍。它可以调用一个回调函数而不是一个变量 - 期望更少的惊喜。