按钮意外提交表单

Question

因此，我正在构建一个您选择日期的表单，然后您可以在该日期添加时间段来安排事情。像这样：

<form name="NewForm" ng-submit="submitForm(NewForm)">
    <form-group>
       <angular-ui datepicker>
       <button ng-click="addRow()">
    </form-group>
    <form-group ng-repeat="timepicker in timepickers track by $index">
        <angular-ui timepicker>
        <select box for tasks to pick from>
        <button class="btn btn-danger" ng-click="deleteRow($index)">
    </form-group>
    <button type="submit" class="btn btn-primary">
</form>

然后在控制器中我有：

$scope.timepickers = []

$scope.addRow = function() {
    $scope.timepickers.push({ some default object data to fill out the row });
}

$scope.deleteRow = function(index) {
    $scope.timepickers.splice(index, 1);
}

$scope.submitForm(form) {
     if ($scope.timepickers.length < 1) {
         //do some stuff and don't send the form  
     } 
     else if (form.$valid) {
         //send form data to api
     }
     else {
         //do some other stuff and don't send the form
     }
}

删除按钮是我添加的最后一件事，在添加之前一切正常。然而，问题在于，有时当我按下行上的删除按钮时，它会提交表单，而对于我的生活，我无法弄清楚原因。

如果我只有1或2'行'，它可以正常工作。删除按钮删除行，我可以继续添加新行等。但是，如果我添加了超过2行，并且我尝试删除中间的一行（即如果我检查了'$ middle = = ng-repeat中的'true'，然后删除该行并调用submitForm函数。

我知道它实际上是通过commitForm函数运行的，因为如果我没有完全填写表单，那么验证内容仍会触发，并且提交不会通过。

有人有什么想法吗？