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

Question

我有一个带有用于添加人员的表单的 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');    
    };
});

复制：

1. 单击文本输入但留空
2. 点击提交

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

预期行为：由于验证和“已提交”警报出现，出现“需要名称” 。

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

我观察到删除ng-messages块可以解决问题，但我确实需要显示验证消息。使用更基本的指令 ( ng-show) 来显示验证消息无济于事。

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

Answer 1

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

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

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

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