AngularJSを使用して動的に作成された '入力'要素を検証する

Question

私はいくつかのエントリを表示するテーブルを持っていて、それぞれ<input>を持っています。ユーザは、「エントリを追加」ボタンをクリックすることによって、追加の入力を動的に追加することができる。それぞれを保存して検証する前に、それらを反復処理する必要があります。私は各入力の値が100よりも大きいことを確認するために私の例を単純化しました（最終的には、MACとIPアドレスを検証するためにパターンマッチを使用します）。

<input>をすべて選択できたらそれはおそらく処理できますが、実際には自分のスコープ内にあるインデックスを使用して特定の<input>を選択したいと考えています。私はangular.elementが方法だと読んでいますが、私は動的に作成されたものを選択する必要があるので、id="myInput"のような簡単な名前は付けません。 "input"というIDを使用し、id属性にAngularの$インデックスを持つ一意の番号を追加しない限りは？

Hereは私が行っていることを示す私のフィドルです。行44は、<input>が100より大きいかどうかを確認するif()です。「行を保存」ボタンは、入力が100より大きいかどうかを検証しますが、行を編集する場合は、「保存」ボタンが必要ですユーザーが編集しました（その横にある[編集]をクリック）。

tl; dr： Angularを使用して動的に作成された<input>を選択するにはどうすればよいですか？

Answer 1

を確認することができます&編集。

function validateBinding(binding) { 
    // Have your pattern-match validation here to validate MAC and IP addresses 
    return binding.ip > 100; 
} 

更新フィドル：

次の行の横にある[編集]をクリックしたときも、私はあなたが最初の行を保存せずに複数の編集を許可する必要が編集して、現在の問題を修正しました

https://jsfiddle.net/balasuar/by0tg92m/27/

を。

「すべてを保存」の検証は以下のように角を描くようになりました。

$scope.changeEdit = function(binding) { 
    binding.onEdit = true; 
    //$scope.editNum = newNum; 
    $scope.showSave = true; 
    }; 

$scope.saveEverything = function() { 
    var error = false; 
    angular.forEach($scope.macbindings, function(binding) { 
     if(binding.onEdit) { 
      if (validateBinding(binding)) { 
      binding.onEdit = false; 
      } else { 
      error = true; 
      } 
     } 
    }); 

    if (error) { 
     alert("One/some of the value you are editing need to be greater than 100"); 
    } else { 
     $scope.showSave = false; 
    } 
    } 

あなたは同じ、

https://jsfiddle.net/balasuar/by0tg92m/27/

注に更新フィドルを確認することができます：あなたは、角を使用しているとして、あなたは上記のように、モデルと無取得する必要があるとループを検証することができます検証のための入力要素あなたのケースでも、モデルを検証するだけで十分です。

高度な検証が必要な場合は、カスタム directiveを作成する必要があります。 AngularJSでは、 controllerの要素内で再生することはお勧めできません。

Answer 2

検証する入力にカスタムクラスを使用できます。次に、そのクラスでこれらの入力をすべて選択して検証できます。クラス「classCtrl」ですべての入力を取得するライン46上では、このフィドルhttps://jsfiddle.net/lealceldeiro/L38f686s/5/

$scope.saveEverything = function() { 
    var inputs = document.getElementsByClassName('inputCtrl'); //inputCtrl is the class you use to select those input s you want to validate 
    $scope.totalInputs = inputs.length; 
    $scope.invalidCount = 0; 
    for (var i = 0; i < inputs.length; i++){ 
    if(inputs[i].value.length < 100){ 
    $scope.invalidCount++; 
    } 
    } 
    //do your stuff here 
} 

を参照して、私はその長さをチェックするために、入力の配列を通過します。そこ

それらのいずれかが実際に無効である場合、あなたは追加の両方のための一般的な方法で検証を維持できるように、私はクリーンな方法であなたのフィドルを更新した（長さやその他の制限により）