动态检查div中的表单完成情况
动态检查div中的表单完成情况
提问于 2016-09-11 08:53:51
<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，但由于某种原因，我无法获取它。
有人能帮我解决这个问题吗？会有很大的帮助。
提前谢谢。
回答 1
Stack Overflow用户
发布于 2016-09-13 20:26:37
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的有效性。
如果两种解决方案都不起作用(我看不出原因)，那么您可以创建一条指令，将其相邻表单的有效性发布到父作用域中的变量。在父作用域中使用变量很棘手，我认为前面的解决方案应该足够了，所以我不会详细介绍。它可以调用回调函数，而不是变量-期望更少的意外。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39434416
复制相关文章
《Python分布式计算》 第6章 超级计算机群使用Python （Distributed Computing with Python）典型的HPC群任务规划器使用HTCondor运行Python任务
相似问题
改变我的输出在C程序中的显示方式？
如何更改外键字段在django管理中的显示方式？
在gameState更改后显示赢/输图片(SFML扫雷程序)
如何更改Django显示验证过程中创建的错误消息的方式？
输出在特定的Android设备上以不同方式显示
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
