提交按钮在禁用ng后不会消失
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禁用设置"captions | validateFields"。我也试过用一个简单的真理陈述,所以这不是我设置的过滤器。
编辑:有了反馈,我已经得到了我最初想用ng-show做的事情。然而,ng-disabled实际上更适合我想要的。我添加了相关的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-show="captions.$valid"
隐藏按钮,如果表单无效。
关于angular表单的更多信息: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">
相关文章:
- ng映射方向备选方案
- AngularJS UI路由器不能像ng路由器那样工作
- 角度:在ng重复上切换图像
- 正在使用$location.path(.)路由ng视图
- AngularJS:ng之后,重复$scope值未按预期更新
- ng打开空字符串
- 我应该使用Ng提交还是点击表格
- ng init中的表达式无法使用ng repeat
- ng更改事件不适用于Dropdown
- facebook”;添加评论“;popup获胜'不要消失
- ng视图外的链接重定向到ng视图内的页面
- 为什么js事件消失了
- JS文件的路径正在消失
- ng应用程序使脚本无限运行
- 角度的项目列表 ng 重复,ng 单击显示全宽描述
- ng隐藏和ng显示无法正常工作
- 从ng模板访问作用域
- Div 在无线电点击后带有 ng 重复消失
- Ng-重复不起作用的表达显示,然后立即消失
- 提交按钮在禁用ng后不会消失