2016-08-14 3 views
0

https://github.com/neoziro/angular-matchから取得したカスタムディレクティブは、2つのフォームフィールドに一致します。ただし、複数のフィールドに一致するようにカスタマイズするにはどうすればよいですか?ここに私が意味するもののより良い説明があります:AngularJSカスタムディレクティブ - 複数のフィールドにマッチしますか?

-Form Field 1 
-Form Field 2 
-Form Field 3 
-Form Field 4 

-Confirmation (I want this one to match either Field 1,2,3 OR 4.) 

現在、私は1つのフィールドまでしか一致させることができません。

HTMLフォーム:

<input type="text" 
     name="correctAnswer" 
     ng-model="quiz.quizData.correctAnswer" 
     match="answer1"> 
<div ng-show="theQuiz.correctAnswer.$error.match && !theQuiz.correctAnswer.$pristine">Answers do not match!</div> 

指令:

angular.module('match', []).directive('match', ['$parse', matchDirective]); 

function matchDirective($parse) { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     scope.$watch(function() { 
     return [scope.$eval(attrs.match), ctrl.$viewValue]; 
     }, function (values) { 
     ctrl.$setValidity('match', values[0] === values[1]); 
     }, true); 
    } 
    }; 
} 

答えて

0

angular-matchプラグインはもはや維持されている、特に以来、このための独自のディレクティブを書くことが容易ではないかも知れません。

複数のフォーム入力を監視するには、それぞれの入力のng-modelをディレクティブに渡します。ここで私はそれをmatchと呼んだ。

<input type="text" name="firstNameOne" ng-model="firstNameOne"/> 
<input type="text" name="firstNameTwo" ng-model="firstNameTwo"/> 
<input type="text" name="firstNameThree" ng-model="firstNameThree"/> 

<input type="text" name="confirmFirstName" ng-model="confirm" match="{{[firstNameOne, firstNameTwo, firstNameThree]}}"/> 

は今ディレクティブのためにここで

app.directive('match', function() { 
    return { 
     restrict: 'A', 
     controller: function($scope) { 
     $scope.doValidation = function(matches) { 
      //Validation logic. 
     } 
     }, 
     link: function(scope, element, attrs) { 
      scope.$watch('confirm', function() { 
       scope.matches = JSON.parse(attrs.match); //Parse the array. 
       scope.doValidation(scope.matches); //Do your validation here. 
      }); 
     } 
    } 
}); 

は、フォーム入力の検証を示すフィドルです:https://jsfiddle.net/cpgoette/und9t5ee/

+0

これは働いていました!しかし、私が尋ねたいのは一つのことです。私はあなたが一致するエントリを入力し、入力の一つに行ってそれを変更すると、それでも "一致"と言いました。これを修正する方法はありますか? –

+0

match属性を観察して変更を監視することができます。その後、前と同じ検証関数を呼び出します。 Fiddleが更新されました:https://jsfiddle.net/cpgoette/und9t5ee/ –

関連する問題