ボタンが予期せずフォームを送信しています

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 = = true '）、その行を削除してsubmitForm関数を呼び出します。

実際にsubmitForm関数を実行していることはわかっています。フォームを完全に記入しないと、バリデーションの対象がまだトリガーされていて、サブミットが行われないからです。

誰もが考えている？

Answer 1

あなたがタイプボタンの属性を追加する必要があります。

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