ng-repeatでフィールドを動的に追加するときにフォームが送信される

Question

ng-repeatを使用して動的にフォームフィールドを作成しています。私はいくつかの入力/選択肢を持つdivを持っていると私は "追加"ボタンをクリックすると、それらは重複取得します。これまでのところ問題はありません。しかし、私はまた、送信ボタンがクリックされたときにフォーム検証を実行したい。

.ng-submitted select.ng-invalid, .ng-submitted input.ng-invalid { 
    background-color: red; 
} 

予想通りこれは私が動的にフォームへの入力を追加していない提供作品：今、私は、フィールドが送信ボタンを押したときに無効であるユーザーに警告するために、以下をしています。フォームに新しい入力を追加すると、.ng-submittedがフォーム要素に追加されます（押されずに送信されます）。必要な入力と無効な入力はすべて赤色に変わります。 https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview

単に要素を追加するだけで入力を赤色にしたくないだけでなく、誰かが送信ボタンを押していない限り、フォームを送信したくないということもあります。角形で提出することについて私が理解していないものがなければならず、助けに感謝するはずです。

EDIT：さらにテストすると、ボタンの要素が問題であることがわかります。

<button ng-click="addRow()">add</button> 

しかし、これは正常に動作します：これはしかし、なぜ

<input type="button" ng-click="addRow()" value="add"/> 

わかりません。

Answer 1

ボタンのtypeのデフォルト値は "submit"です。それをクリックすると、フォームが送信されます。 type="button"を置くと、ボタンをクリックしたときにフォームが送信されることが明示的に防止されます。

Answer 2

フォーム送信を使用する場合は、フォームにng-submitを使用し、ボタンタイプをsubmitに変更する必要があります。

<form name="form" ng-submit="addRow()"> 
    <div> 
     <div ng-repeat="row in rows track by row.id"> 
     <input type="number" min="0" ng-model="row.id" required/> 
     </div> 
     <button type="submit">add</button> 
    </div> 
    </form> 

コードに複数の変更が必要です。私はこのプランナーでそれらを修正しました：https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview