Question

我已经设置了一个将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>&#8220;</span>
            <input type="text" ng-model="user.caption1" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</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>&#8220;</span>
            <input type="text" ng-model="user.caption2" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</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>&#8220;</span>
            <input type="text" ng-model="user.caption3" size="130"
                           placeholder="Enter your caption here.">
            <span>&#8221;</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设置＆＃34;字幕| validateFields＆＃34 ;.我用一个简单的声明来尝试这个，所以它不是我设置的过滤器。

编辑：通过反馈，我得到了我最初想用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;
}

任何人都可以解释如何在所有字段都有效后才能显示提交按钮吗？

Answer 1

如果表单无效，请尝试ng-enabled="captions.$valid"禁用（可见但不可点击）和ng-show="captions.$valid"以隐藏按钮。

有关角度形式的更多信息：https://docs.angularjs.org/api/ng/directive/form

Answer 2

未经过测试，但您可以使用表单的$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指令

Answer 3

这很容易

完全隐藏

<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-disabled时，提交按钮不会消失

3 个答案:

完全隐藏

直观地禁用