複数のテキストボックス入力検証チェック

Question

私は実際に無効な特殊文字を入力することを禁止するテキストボックス検証を1つ作成しています。ユーザーが無効な特殊文字を入力すると、私はハードエラープロンプトを投げていると私はフラグを設定しています：入力ボックスが無効な値がある場合

$scope.charAllowedText = false; 

だから次のボタンが無効になります。ユーザーが無効な文字を削除するとすぐに、このフラグをtrueに変更します。 私のソリューションは1つのテキストボックスでうまく動作しますが、複数のテキスト入力では機能しません。各ユーザーのonClickで

は、この検証を呼び出しています：

$scope.validateUserInput = function(inputKey) { 
    var count = 0; 
    // inputKey = inputKey.replace(/[^a-zA-Z0-9 ]/g, ""); 
    $scope.imp = []; 
    $scope.imp = Array.from(inputKey.replace(/[a-zA-Z0-9\s]/g, '')); 
    var charInp = []; 

    $scope.missingItems = []; 
    $scope.imp.forEach(function(itemFromTarget) { 
    var itemFound = false; 
    for (var i in $rootScope.specialChar) { 
     if (itemFromTarget === $rootScope.specialChar[i].value) { 
     itemFound = true; 
     } 
    } 

    if (!itemFound) { 
     $scope.charAllowedText = false; 
     $scope.missingItems.push(itemFromTarget); 
    } 
    }); 

    if (($scope.charAllowedText == false)) { 
    $rootScope.charAllowedConfig = $scope.charAllowedText; 
    $scope.header_class = 'modal-error-header'; 
    $scope.cancel_bttn = { 
     txt: 'Ok', 
     class: 'btn-default' 
    }; 
    $scope.action_bttn = {}; 
    $modal({ 
     scope: $scope, 
     templateUrl: 'flexi-modal.html', 
     title: 'Error!', 
     content: '<p class="alert alert-danger">You have entered the ' + $scope.missingItems[0] + ' character which is not supported. Please reenter a different character.</p>', 
     html: true, 
     show: true, 
     animation: 'am-fade-and-scale', 
     placement: 'center' 
    }); 
    } 
}; 

特定のケースでは、私は、テキストボックスのいずれかに無効な文字を削除し、他のテキストボックスがまだ無効な文字を持っている場合、私の次のボタンがあるため有効になります最初のテキストボックスでフラグ値がtrueに設定されました。

Answer 1

有効性チェックを書く正しい方法は、ディレクティブを作成することです。その理由は、バリデーターをとし、ステートレスのをできるだけ保持したいからです。回避策の問題は、入力が有効かどうかを確認するために同じ変数を使用することです。あなたは同じコードを維持したい場合は、Angular-validatorを使用してそれを行うことができます機能を変更し、代わりに変数 $scope.charAllowedText

に値を設定するtrueまたはfalseを返すことです。

このpostもご覧ください。