ctrl. $ Parsers.unshift wirft undefined

Question

ich baue eine benutzerdefinierte Direktive, um zwei Eingabefelder zu entsprechen. So mit ctrl.$parsers.unshift wirft mich einen Fehler Cannot read property 'unshift' of undefined. Kann nicht herausfinden, was falsch läuft. Ich verwende übrigens Angular Material Input Fields.

<md-input-container> 
    <label>E-Mail</label> 
    <input required type="email" name="clientEmail" ng-model="user.clientEmail" 
     minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" /> 
    <div ng-messages="registerForm.clientEmail.$error" role="alert"> 
    <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
     Your email must be between 10 and 100 characters long and look like an e-mail address. 
    </div> 
    </div> 
</md-input-container> 

<md-input-container> 
    <label>E-Mail wiederholen</label> 
    <input required type="email" name="clientEmailconfirm" ng-model="user.clientEmailconfirm" 
    minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" field-match="{{user.clientEmail}}" /> 
    <div ng-messages="registerForm.clientEmailconfirm.$error" role="alert"> 
    <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']"> 
     Your email must be between 10 and 100 characters long and look like an e-mail address. 
    </div> 
    <div ng-message="fieldMatch">E-Mail do not Match...</div> 
    </div> 
</md-input-container> 

Richtlinie:

angular.module('fieldmatcher', []); 
app.directive('fieldMatch', ['$rootScope', '$compile', '$parse', function($rootScope, $compile, $parse) { 
    return { 
    require: ['ngModel'], 
    restrict: 'A', 
    scope: true, 
    link: function(scope, element, attr, ctrl) { 
     ctrl.$parsers.unshift(validate); 
     ctrl.$formatters.push(validate); 

     var validate = function(viewValue) { 
     var comparisonModel = attr.fieldMatch; 

     if (!viewValue || !comparisonModel) { 
      ctrl.$setValidity('fieldMatch', true); 
     } 

     ctrl.$setValidity('fieldMatch', (viewValue === comparisonModel)); 
     return viewValue; 
     }; 

     attr.$observe('fieldMatch', function(comparisonModel) { 
     return validate(ctrl.$viewValue); 
     }); 
    } 
    } 
}]); 

Answer 1

In Ihrem Beispiel des Parameter ctrl der Verknüpfungsfunktion ist eine Anordnung mit einem einzigen Steuerungselement.

Dies liegt daran, dass Sie einen Array-Wert für das require-Attribut verwendet haben.

Siehe docs für die ctrl Parameter:

Der genaue Wert hängt von der benötigen Eigenschaft der Richtlinie:
1. keinen Controller (n) erforderlich: die eigene Controller-Richtlinie, oder nicht definiert, wenn es doesn t eine haben
2. string: die Controller-Instanz
3. Array: Array Controller-Instanzen

So einfach chang e bis require: 'ngModel',.

Und definieren Sie die var validate = function(..., bevor Sie die Variable in das Array Parser und Formatierer setzen.