Question

我使用ng-repeat动态创建表单字段。我有一个带有几个输入/选择的div，当我点击＆＃34;添加＆＃34;按钮，他们得到重复。到目前为止没问题。但是，我还想在单击提交按钮时执行表单验证。现在，我正在执行以下操作以提醒用户按下提交按钮时字段无效：

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

如果我没有动态地向表单添加输入，这将按预期工作。如果我向表单添加新输入，则.ng-submitted会添加到我的表单元素中（不提交被按下），并且所有必需和无效输入都变为红色。您可以在此处查看此示例：https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview

我不仅希望在简单添加元素时输入变为红色，我也不希望表单提交，除非有人点击了提交按钮。必须有一些我不了解的有关提交角形表格的内容，我们将不胜感激。

编辑：进一步测试显示按钮元素是问题。

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

然而这很好：

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

不知道为什么会这样。

Answer 1

按钮的type的默认值为＆＃34;提交＆＃34;。所以点击它会提交表格。明确单击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

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

2 个答案: