[英]Submit Button not disappearing with ng-disabled
我已经建立了一个集成了Angular的表单。 在此表单中,我希望最终提交按钮仅在表单有效时才显示。 有许多字段,但是唯一需要的字段是用户的姓名,电子邮件地址和复选框。 表单可以识别出必填字段无效的时间,但是我无法使“提交”按钮消失(并随后重新出现)。
这是参考代码:
index.html:
<form name="captions" ng-controller="CaptionCtrl>
<div class="current-page">
<div class="pages">
<div class="page active" id="page1">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption1" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(2)">NEXT</button> </div>
</div>
<div class="page" id="page2">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption2" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(3)">NEXT</button>
</div>
</div>
<div class="page" id="page3">
<img src="images/blank_image.jpg">
<div class="page-form">
<span>“</span>
<input type="text" ng-model="user.caption3" size="130"
placeholder="Enter your caption here.">
<span>”</span>
<br>
<button class="page-form-submit" ng-click="pageShift(4)">NEXT</button>
</div>
</div>
<div class="page" id="page4">
<img src="images/blank_image.jpg">
<div class="page-form-submit-page">
<h4>TO ENTER YOUR CAPTION IN THE CONTEST, TELL US YOUR NAME AND CONTACT METHOD.</h4>
<input type="text" ng-model="user.name" size="70" placeholder="Name" required>
<input type="email" ng-model="user.email" size="70" placeholder="E-mail Address" required>
<br>
<input type="checkbox" required>I have read and accept the Terms & Conditions
<br>
<input class="page-form-submit-page-submit" ng-disabled="captions | validateFields" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
</div>
</div>
<div class="page" id="page5">
<img src="images/blank_image.jpg">
<div class="page-form-thankyou">
<span><strong>THANK YOU</strong></span>
</div>
<div class="chapter-two-story-link"><span class="yellow">CLICK TO TELL US YOUR STORY</span></div>
</div>
</div>
</div>
</form>
如果您注意到底部,则可以使用ng禁用集,其中包含“标题| validateFields”。 我也尝试过使用简单的真实陈述来执行此操作,因此它不是我设置的过滤器。
编辑:有了反馈,我得到了最初想要使用ng-show进行的工作。 但是,禁用ng实际上更适合我想要的内容。 我添加了相关的CSS。
style.css
.page-form-submit-page-submit {
display: block;
padding: 5px 15px;
border: none;
border-radius: 2px;
margin: 40px 400px 20px auto;
text-align: center;
background-color: #001F45;
color: #FFD200;
}
.page-form-submit-page-submit:active {
background-color: #0250B0;
}
谁能解释一下如何使“提交”按钮仅在所有字段均有效后才显示?
如果表单无效,请尝试ng-enabled="captions.$valid"
禁用(可见但不可单击),并尝试ng-enabled="captions.$valid"
ng-show="captions.$valid"
隐藏按钮。
有关斜角形式的更多信息: https : //docs.angularjs.org/api/ng/directive/form
未经测试,但是您可以使用表单的$valid
属性,如下所示:
<input class="page-form-submit-page-submit" ng-disabled="!captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
但是,如果您希望按钮完全消失,请使用ng-hide="!captions.$valid"
而不是ng-disabled
指令
这很容易
<input class="page-form-submit-page-submit" ng-if="captions.$valid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
<input class="page-form-submit-page-submit" ng-disabled="captions.$invalid" ng-click="captionSubmit(user)" type="submit" value="SUBMIT">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.