當用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動態添加字段時提交的表格

回答

相關問題