ngRepeat内の角型バリデーション

Question

ng-repeatの中にさまざまな入力を持つ一連のテーブル行があり、必要なフィールドを処理するためにフォーム検証に組み込まれたangleを使用しようとしています。 ng-repeatをサポートしている配列内の項目の1つを削除する場合を除いて、すべてがうまく動作します。ここで

は、私はあなたが最初のテーブルの行を削除した場合、あなたは気づくでしょう、plunkerでは私の問題

https://plnkr.co/edit/Q1qyqlSG69EXR2lTrsHk

を示す私の検証

<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を設定した方法です最後の行はまだ無効ですが、エラーは上記の行にアタッチされています。次に、最後の行を入力して有効にしてからもう一度空にすると、間違った行にエラーが表示されます。後続の行を削除すると、エラーが実際の無効な行からさらに移動し、テーブルにまったく表示されなくなります。

これらの入力を検証する別の方法はありますか？

Answer 1

組み込み角度ディレクティブで{{}}（内挿）を使用していないのが問題です。だからあなたのコードは次のように変更します。

<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 

へ：

検証するplunker製

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

： https://plnkr.co/edit/vuQiH4D8qUY9jVoThnCy?p=preview