Javascript 当表单无效时，角度验证渲染无效

我有一张婚礼RSVP表格

我试图隐藏“完成提交”按钮，并仅在表单有效时显示它

<form method="POST" action="http://l.bheng.com:8888/wedding" accept-charset="UTF-8" class="ng-pristine ng-pristine ng-valid ng-valid-required ng-valid-email" role="form" id="rsvp-form" name="rsvp-form">
    <input name="_token" type="hidden" value="JK8PC04aF7xGsbcQoTvzz2FV61od1DmGdraiZNwB">
    <div class="col-xs-12 form-group">
        <label for="">Are you attending ? </label>
        <br>
        <label for="going">
            <input type="radio" id="going" value="1" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="3"> Yes
        </label>
        <label for="going">
            <input type="radio" id="going" value="0" ng-model="going" class="ng-pristine ng-untouched ng-valid ng-not-empty" name="4"> No
        </label>
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Number of total guests ? </label>
        <br>
        <select id="guestNum">
            <option value="1">Just Me</option>
            <option value="2">Me and My +1</option>
        </select>
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Name</label>
        <input type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-required" id="name" placeholder="Name" ng-model="name" ng-required="required">
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Email</label>
        <input type="email" class="normal ng-pristine ng-untouched ng-valid ng-empty ng-valid-email ng-valid-required" placeholder="Email Address" id="email" ng-required="required" ng-model="email">
    </div>
    <div class="col-xs-12 form-group">
        <label for="">Message</label>
        <textarea id="message" ng-model="message" rows="5" type="text" class="normal ng-pristine ng-untouched ng-valid ng-empty" placeholder="Message to us "></textarea>
        <grammarly-btn>
            <div data-reactroot="" class="_e725ae-textarea_btn _e725ae-anonymous _e725ae-not_focused" style="visibility: hidden; z-index: 2;">
                <div class="_e725ae-transform_wrap">
                    <div title="Protected by Grammarly" class="_e725ae-status">&nbsp;</div>
                </div>
            </div>
        </grammarly-btn>
    </div>
    <div class="col-xs-12" ng-hide="rsvp-form.name.$invalid || rsvp-form.email.$invalid ">
        <a id="rsvp-submit" ng-click="rsvp()" class="button" style="width: 100%;">

                  Done

                  <img src="/img/svg/default.svg" alt="Loading" style="width: 30px; float: right; padding-top: 7px; " class="hidden loading">

                </a>
    </div>
</form>

无论发生什么，我的“完成”按钮始终显示

我怎样才能阻止它

我的表格怎么能有这门课

原始的

---

ng validng valid的用法如下：

ng-valid="isValid()"

其中，DOM可以访问表达式并返回布尔值。 例如：

但是，如果你想让“完成”按钮消失，你需要ng hide、ng show，最好是ng If。查一查。 ng valid将仅灰显按钮

编辑： 为了清晰起见，这里有一个更全面的ng valid示例

HTML:

这不会使你的按钮消失，只是变灰了。

---

如果您想让它消失，请将ng valid替换为ng show。

您不应该将表单命名为rsvpForm及其所有出现的项而不是rsvp表单吗？我认为rsvp表单在JavaScript中不是有效的名称。这可能是它不起作用的一个原因。也许您应该在表单标记上使用novalidate关闭HTML验证，并使用simply required而不是ng required=required，因为IMO尝试查找$scope.required，它未定义且指令无法正常工作。工作小提琴：

您能提供工作小提琴吗？我的建议是，您的ng hide在错误的位置查找要验证的数据，因为您的“name”模型例如作为name存储在范围中，而不是存储在对象rsvp表单中，但是fiddle可以帮助调试；您是否在原始html中包含ng pristine ng pristine ng valid ng valid required ng valid ng valid电子邮件？？？@AlonEitan:不，我没有包含。当我刷新页面时，它会自动生成。我在查看页面源代码后复制了它。@LucaArgenziano:这是我的提琴：是因为我有2个ng model=go吗？OP使用了ng hide…，仔细看看。也看不出ngValid与这个问题有什么关联。你没有解释它是如何解决问题的。莫普似乎使用了很多东西，我不确定他是否知道如何使用。如他所说，如果他希望他的“完成”按钮停止显示，那么他不是在寻找ng-valid。。我正试图隐藏已完成的提交按钮。因此，ng hide、ng show和ng if——但这三种方法的用法大致相同。哦，我明白了，角度与指令相混淆。。。。你完全正确。我没想到。谢谢。@ihue，这就是奇怪行为的原因吗？在根据您的建议更新代码后，我仍然看到同样的问题，您可以在这里看到：@ihue对我的答案做了一些更改，但我后来添加了它，可能您没有看到，我想它的工作方式与您预期的一样：顺便说一句，我认为Plunker更适合角度相关的简单示例，此外，Plunker是用Angular写的：@emporikok your fiddle正是我在之前的评论中所说的，我说的是在错误的地方寻找数据进行验证。我认为你应该在答案中包括小提琴，而这将是正确的答案。请注意：没有必要向输入字段添加ng特定的类，因为angular会根据所需的规范自动注入它们。

$scope.isValid = function () {
  return True;
}

<input type="text" name="email" class="somethingUnrelated" ng-model="email">
<input type="button" name="confirm" class="somethingElse" ng-valid="isValid()">

$scope.isValid = function () {
   if ($scope.email) {
     return $scope.email.length > 0;
   }
 }