javascript - 按钮意外提交表单

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>

然后在 Controller 中我有:

$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 行，并且我尝试删除中间的其中一行(即如果我检查了 if '$middle = = true' in the ng-repeat), 然后它删除该行并调用 submitForm 函数。

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

有人有什么想法吗？

Answer 1

需要添加type按钮的属性:

<button class="btn btn-danger" ng-click="deleteRow($index)" type="button">