ngRepeat中的角度表單驗證

我有一系列的表格行在ng-repeat中有不同的輸入，我試圖使用內置在表單驗證中的角度來處理必需的字段。除了當我刪除支持ng-repeat的數組中的項目之外，一切都很好。ngRepeat中的角度表單驗證

這裏是如何我已經設置了我的驗證

<td ng-class="{ 'has-error' : vm.testForm.itemName{{$index}}.$invalid }"> 
    <input type="text" 
     name="itemName{{$index}}" 
     class="form-control" 
     ng-model="item.name" 
     required /> 
    <div class="help-block" 
     ng-show="vm.testForm.itemName{{$index}}.$invalid" 
     ng-messages="vm.testForm['itemName'+$index].$error"> 
    <span ng-message="required">Name is required</span> 
    </div> 
</td>

Plunker顯示我的問題

https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk

在plunker，如果刪除第一個錶行，你會發現儘管最後一行仍然無效，但錯誤已經附加到上面的行中。然後，當您填寫最後一行以使其有效並再次清空時，錯誤仍顯示在錯誤的行上。刪除後續行只是將錯誤從實際的無效行進一步移動，直到它們完全不出現在表上。

我還有另外一種方法來驗證這些輸入嗎？

來源

2017-01-09 Alarion

結帳[這]（HTTP：/ /stackoverflow.com/questions/19859959/validating-nested-form-in-angular#answer-19860312）回答。 'ng-form'的確有用。 – user2718281

問題是，你不通常在構建的角度指令中使用{{}}（插值）。所以，你的代碼更改爲：

<td ng-class="{ 'has-error' : vm.testForm['itemName' + $index].$invalid }"> 
<input type="text" 
     name="itemName{{$index}}" 
     class="form-control" 
     ng-model="item.name" 
     required /> 
<div class="help-block" 
     ng-show="vm.testForm['itemName' + $index].$invalid" 
     ng-messages="vm.testForm['itemName'+$index].$error"> 
    <span ng-message="required">Name is required</span> 
</div> 
</td>

變化：

vm.testForm.itemName{{$index}}.$invalid

要：

vm.testForm['itemName' + $index].$invalid

發了plunker驗證： https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview

來源

2017-01-10 00:52:11

完美的作品。我感到很蠢，因爲我已經在ng-messages屬性中使用了這種語法，並沒有想到在ng-show和ng-class上嘗試它。：）非常感謝。 – Alarion

ngRepeat中的角度表單驗證

回答

相關問題