Angularjs 使用ng repeat动态添加字段时提交的表单

我正在使用ng repeat动态创建表单字段。我有一个具有多个输入/选择的div，当我单击“添加”按钮时，它们会被复制。到目前为止没有问题。但是，我还希望在单击submit按钮时执行表单验证。现在，我正在执行以下操作，以提醒用户在按下提交按钮时字段无效：

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

如果我没有动态地将输入添加到表单中，这将按预期工作。如果我向表单中添加新输入，.ng submited将添加到我的表单元素中（未按submit），所有必需的和无效的输入将变为红色。您可以在此处看到这样一个示例：

我不仅不希望在简单地添加元素时输入变成红色，而且我也不希望表单提交，除非有人点击了提交按钮。一定有什么我不明白的提交与角形式和帮助将不胜感激

编辑：进一步的测试表明按钮元素是问题所在

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

添加

这很好，但是：

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

---

但不确定原因。

按钮的

类型的默认值为“提交”。因此，单击它提交表单。单击按钮时，放置
type=“button”
明确阻止表单提交。
按钮的
类型的默认值为“提交”。因此，单击它提交表单。单击按钮时，将
type=“button”
明确禁止提交表单。
如果要使用表单提交，则需要在表单上使用
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>


添加

您的代码中需要进行多次更改。我已经在这个插件中修复了它们：
如果你想使用表单提交，你需要在表单上使用
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>


添加

您的代码中需要进行多次更改。我已经在这个垃圾桶中修复了它们：
是的，刚刚意识到我愚蠢的错误。谢谢。是的，我刚刚意识到我的愚蠢错误。谢谢你。