Question

我有婚礼RSVP 表格

我正在尝试隐藏DONE提交按钮，并仅在表单有效时显示。

<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-pristine
ng-valid＆lt; ---怎么可能？我甚至没有输入任何名称/电子邮件
ng-valid-required＆lt; ---怎么可能？我甚至没有输入任何名称/电子邮件
ng-valid-email＆lt; ---怎么可能？我甚至没有输入任何名称/电子邮件

JSfiddle = https://jsfiddle.net/bheng/Ln3tqzcu/

Answer 1

您不应该为表单rsvpForm（及其所有出现次数）而不是rsvp-form命名吗？我不认为rsvp-form是JavaScript中的有效名称。这可能是它不起作用的原因。也许您应该使用novalidate标记上的form关闭HTML验证，并使用required代替ng-required="required"，导致IMO尝试查找$scope.required，这是undefined并且指令不能正常工作。工作小提琴：https://jsfiddle.net/od62sshv/3/

Answer 2

ng-valid的用法是这样的：

ng-valid="isValid()"

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

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

如果你想让'完成'按钮消失，你想要ng-hide，ng-show，最好是ng-if。看看他们。 ng-valid只会使按钮变灰。

编辑：
为清晰起见，这是一个更全面的ng-valid示例。

HTML：

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

JS：

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

这不会让你的按钮消失，只会变灰。如果你想要它，请用ng-show替换ng-valid。

当表单无效时，Angular Validation呈现ng-valid

2 个答案: