Javascript 提交按钮未在禁用ng时消失

我已经建立了一个整合了角度的表格。在此表单中，我希望最终提交按钮仅在表单有效时显示。有许多字段，但唯一需要的字段是用户名、电子邮件地址和复选框的字段。表单可以识别所需字段是否无效，但是我无法使submit按钮消失（随后再次出现）

以下代码供参考：

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>

---

有人能解释一下如何让提交按钮在所有字段都有效后才显示吗？

未测试，但您可以像这样使用表单的

$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

指令未测试，但您可以使用表单的

$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

指令未测试，但您可以使用表单的

$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

指令未测试，但您可以使用表单的

$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

指令尝试

ng enabled=“captions.$valid”

禁用（可见但不可单击）和

ng show=“captions.$valid”

在表单无效时隐藏按钮

有关angular中表单的详细信息：

尝试

ng enabled=“captions.$valid”

禁用（可见但不可单击）和

ng show=“captions.$valid”

在表单无效时隐藏按钮

有关angular中表单的详细信息：

尝试

ng enabled=“captions.$valid”

禁用（可见但不可单击）和

ng show=“captions.$valid”

在表单无效时隐藏按钮

有关angular中表单的详细信息：

尝试

ng enabled=“captions.$valid”

禁用（可见但不可单击）和

ng show=“captions.$valid”

在表单无效时隐藏按钮

关于角形的更多信息：

这相当简单

完全隐藏

视觉残疾

这相当容易

完全隐藏

视觉残疾

这相当容易

完全隐藏

视觉残疾

这相当容易

完全隐藏

视觉残疾

是否从函数

validateFields

返回布尔值？ng disabled是否启用或禁用按钮，表示无法单击按钮。还有ng show和ng hide指令。是否使用这些更改元素的可见性？是否从函数

validateFields

返回布尔值？ng disabled是否启用或禁用按钮，表示无法单击该按钮。还有ng show和ng hide指令。是否使用这些更改元素的可见性？是否从函数

validateFields

返回布尔值？ng disabled是否启用或禁用按钮，表示无法单击该按钮。还有ng show和ng hide指令。是否使用这些更改元素的可见性？是否从函数

validateFields

返回布尔值？ng disabled是否启用或禁用按钮，表示无法单击该按钮。还有ng show和ng hide指令。您不使用这些更改元素的可见性吗？验证

标题中还有其他值。$invalid

无需否定它感谢快速响应！ng show是可行的，但如果它是可见的，而不是可点击的，则更有意义。我试着按照你的建议使用ng disabled，但是当点击按钮时，按钮仍然会改变，这仅仅是一个css的东西，它实际上没有注册为Angular的点击吗？我会用相关的css更新帖子。@maurycy短一个字节：P…只是开玩笑，我不知道，谢谢：）@RyanB检查生成的HTML。按钮是否具有属性

disabled=“disabled”

？如果是这样的话，这是一个css问题。验证

标题中还有其他值。$invalid

无需否定它感谢快速响应！ng show是可行的，但如果它是可见的，而不是可点击的，则更有意义。我试着按照你的建议使用ng disabled，但是当点击按钮时，按钮仍然会改变，这仅仅是一个css的东西，它实际上没有注册为Angular的点击吗？我会用相关的css更新帖子。@maurycy短一个字节：P…只是开玩笑，我不知道，谢谢：）@RyanB检查生成的HTML。按钮是否具有属性

disabled=“disabled”

？如果是这样的话，这是一个css问题。验证

标题中还有其他值。$invalid

无需否定它感谢快速响应！ng show是可行的，但如果它是可见的，而不是可点击的，则更有意义。我试着按照你的建议使用ng disabled，但是当点击按钮时，按钮仍然会改变，这仅仅是一个css的东西，它实际上没有注册为Angular的点击吗？我会用相关的css更新帖子。@maurycy短一个字节：P…只是开玩笑，我不知道，谢谢：）@RyanB检查生成的HTML。按钮是否具有属性

disabled=“disabled”

？如果是这样的话，这是一个css问题。验证

标题中还有其他值。$invalid

无需否定它感谢快速响应！ng show是可行的，但如果它是可见的，而不是可点击的，则更有意义。我试着按照你的建议使用ng disabled