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

Posted 2023-05-09

【中文标题】当表单无效时，Angular Validation 呈现 ng-valid

【英文标题】：Angular Validation render ng-valid when form is not valid

【发布时间】：2017-09-07 04:45:01

【问题描述】：

我有一个婚礼回复表格

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

<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"  style="width: 30px; float: right; padding-top: 7px; " class="hidden loading">

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

无论如何，我的完成按钮都会一直显示。

我该如何阻止它？

我的表单怎么会有这个类？

ng-pristine ng-valid ng-valid-required ng-valid-email

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

【问题讨论】：

你能提供一个工作小提琴吗？我的建议是您的ng-hide 正在寻找错误的位置来验证数据，因为例如，您的“名称”模型存储在name 的范围内，而不是在对象rsvp-form 内，而是小提琴可以帮助调试；）

原始html中是否包含ng-pristine ng-pristine ng-valid ng-valid-required ng-valid-email？？

@AlonEitan ：不，我没有包括那个。当我刷新页面时它会自动生成。我在view page source之后复制了它。

@LucaArgenziano：这是我的小提琴：jsfiddle.net/bheng/Ln3tqzcu

是不是因为我有2个ng-model="going"？

【参考方案1】：

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

【讨论】：

哦，我明白了，Angular 与指令混淆了......你是 100% 正确的。我没有想到。谢谢。

@ihue，这是奇怪行为的原因吗？

根据你的建议更新我的代码后我仍然看到同样的问题，你可以在这里看到它：jsfiddle.net/bheng/Ln3tqzcu

@ihue 几乎没有变化（来自我的回答，但我后来添加了它，也许你没有看到它们），我认为它可以像你期望的那样工作：jsfiddle.net/od62sshv/3 BTW 我认为 Plunker 更好对于 Angular 相关的简单示例，此外 Plunker 是用 Angular 编写的 :)

@Pneumokok 你的小提琴正是我在之前评论中所说的“正在寻找错误的数据验证位置”时的意思。我认为您应该在答案中包含小提琴，这将是正确的。请注意：无需将特定于 ng 的类添加到输入字段，因为角度会根据 required 规范自动注入它们。

【参考方案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-valid 替换为 ng-show。

【讨论】：

OP 正在使用ng-hide ....仔细看。也看不到ngValid 与该问题的相关性。您没有提供如何解决问题的解释

OP 似乎使用了很多东西，我不确定他知道如何使用。如果他希望他的“完成”按钮停止显示，正如他所说，那么他不是在寻找 ng-valid。

它清楚地说明了.. “我正在尝试隐藏完成提交按钮”

同意。因此 ng-hide、ng-show 和 ng-if - 但三者的用法大致相同。