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

【问题标题】：form submitted when dynamically adding fields with ng-repeat使用 ng-repeat 动态添加字段时提交的表单
【发布时间】：2016-04-30 05:02:54
【问题描述】：

我正在使用 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

我不仅不希望在简单地添加元素时输入变为红色，而且我也不希望表单提交，除非有人点击了提交按钮。关于使用 Angular 表单提交，我一定有什么不明白的地方，我们将不胜感激。

EDIT：进一步测试表明按钮元素是问题所在。

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

这很好用：

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

不知道为什么会这样。

【问题讨论】：

标签： angularjs

【解决方案1】：

按钮type的默认值为“提交”。因此，单击它会提交表单。设置type="button" 显式防止在单击按钮时提交表单。

【讨论】：

是的，刚刚意识到我的愚蠢错误。不过还是谢谢。

【解决方案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>

您的代码需要进行多项更改。我已经在这个 plunker 中修复了它们：https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview

【讨论】：