角度とjqueryを使用して入力フィールドを検証していますか？

Question

私はangular-jsとjQueryを使用して、ng-repeatを使用して作成されたフォームでユーザー入力を検証しています。だから本質的に私はループして表示する文字列（バーコード）の配列を持って、私はまた、入力フィールドを表示します。ユーザはバーコードスキャナを使用して、コピー/ペースト効果のように入力フィールドに文字列を入力するようにします。バーコードが隣の文字列と一致しない場合は、ユーザーに警告して入力フィールドをクリアする必要があります。私はこれを実行するためにng-model-options 'Blur'を使用する以下のコードを持っており、ほとんど動作します。今は、入力が間違っているたびにユーザーに3回警告します。なぜ3回発砲するのか分かりません。 angular/jQueryでこの検証を達成するためのよりエレガントな方法が必要ですか？おそらく指示？私は角で新しいので、どんな助けも大歓迎です、ありがとう！

HTML：

<div ng-repeat="(index, val) in barcodes.barcodes track by $index"> 
    <div class="form-group row" ng-show="barcodes.barcodes[index]"> 
    <div ng-if="barcodes.barcodes[index] != 'X'"> 
     <label class="col-sm-3 form-control-label" style="margin-top:5px"> {{ barcodes.barcodes[index] }} </label> 
     <label class="col-sm-2 form-control-label" style="margin-top:5px"> {{ barcodes.A_adaptors[$index+8] }} </label> 
     <div class="col-sm-1" style="margin-top:5px"> 
     <button class="btn btn-xs btn-default hvr-pop" data-toggle="dropdown" ng-click="getIndex($index+8)"><i class="fa fa-cogs" aria-hidden="true" style="color:#DF3D42"></i></button> 
      <ul class="dropdown-menu" role="menu"> 
      <div ng-repeat="x in barcodes.B_adaptors"> 
       <li class="text-center" ng-click="replace(x)" id="B_adaptors">{{ x }}</li> 
      </div> 
      </ul> 
     </div> 
     <div class="col-sm-6"> 
     <input type="text" class="form-control matching" ng-model-options="{ updateOn: 'blur' }" ng-model="item.barcodeInput" placeholder="Barcode" required> 
     <div ng-show="!isEqualToBarcode($index+8, item.barcodeInput)"> Error: Barcode not the same! </div> 
     </div> 
    </div> 
    </div> 
</div> 

JAVASCRIPT（コントローラ内）

$scope.isEqualToBarcode = function(index, val) { 
    if(val === null || val === undefined) return true; 

    if($scope.barcodes.A_adaptors[index] !== val.trim()) { 
     console.log("wrong", val); 
     alert("Incorrect Barcode, Try Again."); 
     val = ""; 
    } 

    return $scope.barcodes.A_adaptors[index] === val.trim(); 
} 

Answer 1

一つの方法は、角形状に変更することです。 角度は、入力の検証と無効な入力のフラグを与えます。 ここにあなたを始めるためのリンクがあります 同じバリデータのための独自のバリデータディレクティブを定義することもできます。

https://docs.angularjs.org/guide/forms

Answer 2

ng-showはNG-ショーで期待通りの機能は通常動作しない、boolean型の値を期待しているためです。 ng-blurイベント内の入力にisEqualToBarcode関数を入れてみてください。

角度の入力/フォームの検証を使うのが良い解決策だと言われていますが、使い方を簡単に説明しました。hereですが、まったく新しいものであればドキュメントやチュートリアルをご覧ください。あなたが望むバリデーションの種類は、幸運にもother people have already created a custom directive to handle thatという箱から外に出てくるわけではありません。これはパスワードを確認するために作成されたものですが、基本的な機能はまだ同じです（2つの値が一致しています）。これは長い道のりのように見えるかもしれませんが、長期的には多くの問題を救えると信じています。