Formular gesendet, wenn dynamisch Felder mit ng-repeat

Question

Ich fange dynamisch Formularfelder mit ng-Wiederholung. Ich habe ein Div mit mehreren Eingängen/Selects und wenn ich auf einen "Add" -Button klicke, werden sie dupliziert. Keine Probleme bisher. Ich möchte jedoch auch eine Formularüberprüfung durchführen, wenn auf die Übergabeschaltfläche geklickt wird. Gerade jetzt, ich mache den folgenden Benutzer zu alarmieren, ein Feld ist ungültig, wenn die Submit-Taste gedrückt wird:

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

Das funktioniert wie erwartet zur Verfügung gestellt habe ich nicht dynamisch hinzugefügt Eingaben in das Formular ein. Wenn ich dem Formular neue Eingaben hinzufüge, wird .ng-submitted zu meinem Formularelement hinzugefügt (ohne das Senden wird gedrückt) und alle erforderlichen und ungültigen Eingaben werden rot. Sie können hier ein Beispiel sehen: https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview

Nicht nur will ich nicht die Eingänge rot werden, wenn Sie einfach Elemente hinzufügen, ich möchte auch nicht das Formular einreichen, es sei denn, jemand hat die Schaltfläche senden gedrückt. Es muss etwas geben, das ich nicht verstehe, mit eckigen Formen zu unterwerfen und Hilfe würde geschätzt werden.

EDIT: weitere Tests zeigen, dass das Button-Element das Problem ist.

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

arbeitet Dieses feine aber: obwohl

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

nicht sicher, warum dies ist.

Answer 1

Der Standardwert der type einer Schaltfläche ist "Senden". Wenn Sie darauf klicken, wird das Formular gesendet. Durch das Setzen von type="button" wird das Senden des Formulars beim Klicken auf die Schaltfläche explizit verhindert.

Answer 2

Wenn Sie Formular senden möchten, müssen Sie ng-submit auf Formular verwenden und den Schaltflächentyp zu submit ändern.

<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> 

In Ihrem Code waren mehrere Änderungen erforderlich. Ich habe sie in diesem Plünderer behoben: https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview