Question

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

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

<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');    
    };
});

要复制：

点击文字输入，但留空
点击提交

当前行为：＆＃34;名称是必需的＆＃34;由于验证而出现。点击“提交”＃39;再次显示“已提交的”＃39;警报。

预期行为：＆＃34;名称是必需的＆＃34;由于验证和已提交＆＃39;警报出现。

所需行为：＆＃39;已提交＆＃39;警报出现，我向vm.submit（）添加一些代码以隐藏＆＃39;名称是必需的＆＃39;验证消息，因为它在提交列表时并不重要。

我发现删除ng-messages块可以解决问题，但我确实需要显示验证消息。使用更基本的指令（ng-show）来显示验证消息反而无济于事。

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

Answer 1

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

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

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

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

Answer 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>

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

2 个答案: