当用ng-repeat动态添加字段时提交的表格

我使用ng-repeat动态创建表单字段。我有一个div与几个输入/选择，当我点击一个“添加”按钮，他们得到重复。目前没有问题。但是，我也想在点击提交按钮时执行表单验证。现在，我做了以下提醒用户现场按下提交按钮时，是无效的：当用ng-repeat动态添加字段时提交的表格

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

可正常工作提供我还没有动态添加输入形式。如果我向表单中添加新的输入，则.ng提交的获取将添加到我的表单元素中（无需按下提交），并且所有必需和无效输入变为红色。你可以在这里看到一个这样的例子：https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview

当我简单地添加元素时，我不希望输入变成红色，我也不希望表单提交，除非有人点击了提交按钮。必须有一些我不明白的提交角度形式和帮助将不胜感激。

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

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

这工作然而罚款：

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

不知道这是为什么，但。

来源

2016-04-29 James

按钮的type的默认值是“submit”。所以点击它提交表单。当点击按钮时，将type="button"明确禁止提交表单。

来源

2016-04-29 20:56:43

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

如果要使用表单提交，您需要在表单上使用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

来源

2016-04-29 21:02:54

当用ng-repeat动态添加字段时提交的表格

回答

相关问题