角度模糊验证阻止提交单独的表单

Posted 2023-04-12

【中文标题】角度模糊验证阻止提交单独的表单

【英文标题】：Angular blur validation preventing submission of separate form

【发布时间】：2015-11-12 20:50:13

【问题描述】：

我有一个 Angular 页面，其中包含一个用于添加人员的表单，以及一个用于提交人员列表的按钮（在此表单之外）。

当用户关注表单中的文本输入，然后单击提交列表时，会出现来自文本输入的验证错误，但不会发生提交事件。

这里是这个问题的一个例子：http://plnkr.co/edit/6Z0UUs

<div ng-controller="MyCtrl as vm">
  <form name="form1" novalidate="">
    <input type="text" name="field1" ng-model="vm.name" required>
    <div ng-messages="form1.field1.$error" ng-if="form1.field1.$touched">
      <label ng-message="required">Name is required</label>
    </div>
    <!-- 
    This form adds a person to a list. I've not included this code to keep the example simple 
    <input type="submit" value="Add person"> 
    -->
  </form>
  <button ng-click="vm.submit()">Submit list</button>
</div>

-

angular.module('myApp',[])
.controller('MyCtrl', function() 
    var vm = this;

    vm.name = '';

    vm.submit = function () 
        alert('submitted');    
    ;
);

复制：

点击文本输入但留空 点击提交

当前行为：由于验证，出现“需要姓名”。再次单击“提交”会显示“已提交”警报。

预期行为：由于验证而出现“需要姓名”并且出现“已提交”警报。

期望的行为：出现“已提交”警报，我向 vm.submit() 添加了一些代码以隐藏“需要名称”验证消息，因为提交列表时它并不重要。

我发现删除 ng-messages 块可以解决问题，但我确实需要显示验证消息。使用更基本的指令 (ng-show) 来显示验证消息并没有帮助。

任何关于我做错了什么的见解，或者实现我想要的行为的解决方法，都会很棒！

【参考方案1】：

[修改后的答案]： 这是一个工作的 plunker：http://plnkr.co/edit/JCyRi8xp4L3FtafABblS?p=preview

vm.preventDefaultIfSubmitted = function($event)
if($event.relatedTarget.id == "submit")
    $event.stopImmediatePropagation();
  
;

这个想法是在发生模糊时获取 $event，然后查看 relatedTarget 的 id（在这种情况下是您的按钮），如果是，则取消 $event，否则保留它。

这样，如果您点击任何出现验证消息的地方，如果您点击提交，则不会

【讨论】：

这是一个两步过程。该表单用于将人员添加到页面上显示的列表中（我隐藏了该表单的其余部分，包括“添加”按钮，以简化 Plunkr）。该按钮用于然后提交该列表。提交列表时add-person-form为空其实比较理想，但是添加到列表时需要人名。

哦，好的，我明白现在的问题所在。一种想法是在您从输入中模糊时停止默认事件，但每次您从该字段中模糊时都会丢失消息......但是它可以在您按下添加时保留验证消息。

我会说你的问题是你的消息中的 ng-if，因为即使你输入了一个名字，你也会打开验证消息

问题不在于出现验证消息，而在于它阻止了对 submit() 的调用

我喜欢您修改后的答案的外观。目前验证消息永远不会显示..会看看我是否可以调整:)

【参考方案2】：

这可能有助于表单验证

<form role="form" name="projectBriefFrm">
                    <div class="form-group">
                        <label for="project_title">Project Title
                            <sup>*</sup>
                        </label>
                        <input ng-model="project.title" ng-required="true" type="text" class="form-control" name="title" placeholder="Untitled Project"
                        />
                        <div class="row">
                            <span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.title.$invalid">Please provide title</span>
                        </div>
                        <div class="container" id="editor-title">
                            <label for="project_brief">Project Brief
                                <sup>*</sup>
                            </label>
                            <div class="row" id="editor">
                                <div class="col-lg-12 nopadding">
                                    <textarea ng-model="project.brief" name="brief" cult-editor ng-required="true"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <span class="errorMessage" ng-show="!isProjectModelValid && projectBriefFrm.brief.$invalid">Please provide project brief</span>
                        </div>
                    </div>
                </form>

【讨论】：

不确定这有什么帮助 - 似乎没有解决我遇到的具体问题。在正常情况下让验证正常工作没有任何问题...