Angularjs erhalten Formular Feldgültigkeit innerhalb der Direktive

Question

Ich hoffe, das ist kein Duplikat - viele ähnliche Fragen über, aber ich kann keine Antwort finden, die funktioniert.

Ich habe eine Angular-Richtlinie, also:

app.directive('emailInput', function(){ 
    return { 
     restrict: 'E', 
     templateUrl: 'template.html', 
     link: function(scope, elem, attrs, ctrl){ 
      elem.bind('keyup', function(){ 
       // TODO - what? 
      }) 
     } 
    } 
} 

und in der Vorlage html:

<input type="email" required ng-model="emailAddress" /> 

Ohne den Namen des Formulars zu kennen, in der link Funktion, ich möchte das wissen Wert der emailAddress.$valid Eigenschaft - wie kann ich das bekommen?

Answer 1

Sie können die formController benötigen, die Sie alle Eingaben in das Formular

app.directive('emailInput', function(){ 
    return { 
     require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM. 
     restrict: 'E', 
     templateUrl: 'template.html', 
     link: function(scope, elem, attrs, ctrl){ 
      elem.bind('keyup', function(){ 
       ctrl.emailAddress.$valid //check validity 
      }) 
     } 
    } 
} 

registriert Zugang geben würde Denken Sie daran, dass Angular Spur von Eingabeelementen nach Namen hält. So haben Sie Ihre Eingabe einen Namen geben Attribut

<input type="email" required ng-model="emailAddress" name="emailAddress" /> 

ich auch vielleicht würde empfehlen, nur all dies durch eine Richtlinie Attribut übergeben. Wahrscheinlich möchten Sie die Feldnamen nicht hart codieren. So konnte man nur ein Attribut, das die Gültigkeit

inputIsValid='formName.emailAddress.$valid' 

und bewerten (oder $ jetzt sehen) in der Richtlinie nimmt.

Answer 2

Wir können die Gültigkeit einfacher überprüfen, ohne den Namen der Eingabeelemente zu kennen.

app.directive('emailInput', function(){ 
    return { 
     require: '^form', // We look for it on a parent, since it will be defined somewhere higher on the DOM. 
     restrict: 'E', 
     templateUrl: 'template.html', 
     link: function(scope, elem, attrs, ctrl){ 
      elem.bind('keyup', function(){ 
       ctrl.$valid //check validity here 
      }) 
     } 
    } 
} 

Answer 3

Dies ist eine alte Post, aber für die Leute, die hier durch googeln, ist dies der sauberste Weg Gültigkeit einer Eingabe in Ihrer Richtlinie zu überprüfen, ohne seinen Namen zu wissen, so dass Sie Ihre Richtlinie über jede Eingabe verwenden können Element.

Sie müssen nur die ngModel Controller benötigen:

app.directive('emailInput', function(){ 
    return { 
    require: 'ngModel' 
    restrict: 'E', 
    templateUrl: 'template.html', 
    link: function(scope, elem, attrs, ngModelCtrl){ 
     elem.bind('keyup', function(){ 
      ngModelCtrl.$valid //check validity 
     }) 
    } 
    } 
} 

Siehe AngularJS Dokument für ngModel.NgModelController, $valid unter dem Abschnitt Eigenschaften:

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

Answer 4

weiß, es ist ein alter Thread aber wenn jemand auf dieses Problem stößt, so habe ich es gelöst:

Answer 5

Hier ist eine Richtlinie, die auch schmutzig auf true gesetzt werden, wenn nichts eingegeben wurde.

standardmäßig $ schmutzig wird gesetzt, wenn etwas in typisiert ist und würde zeigen, nicht eine erforderliche Fehlermeldung, bis der Benutzer sendet . Mit diesem

function() { 
    return function (scope, element, attrs) { 
     $(element).blur(function() { 
      scope.$apply(function() { 
       var field = scope.$eval(attrs.makeDirty); 
       field.$dirty = true; 
      }); 
     }); 
    }; 

HTML:

<label class="fieldLabel" for="confirmEmail">Confirm Email*</label> 
<input type="text" id="confirmEmail" name="confirmEmail" ng-model="confirmEmail" ng-pattern="{{Ctrl.Model.Email.EmailAddress}}" required make-dirty="form.confirmEmail"> 
<span class="error" ng-show="form.confirmEmail.$error.pattern && form.confirmEmail.$dirty">Emails must match</span> 
<span class="error" ng-show="form.confirmEmail.$error.required && (form.$submitted || form.confirmEmail.$dirty)">Confirm your email</span> 

Das mir Feedback, wenn der Benutzer zu geben, ermöglicht wird Ausfüllen oder auf dem Formular Tabbing.

Answer 6

Lassen Sie mich Ihnen eine weitere Möglichkeit geben, es zu tun, ist es in einigen Fällen sinnvoll sein kann

link: function (scope, element, attrs, formCtrl) { 
    scope.fileSizeError=false; 
    scope.$watch(function() { 
       return formCtrl.fileP.$error.maxSize; 
      },function(newValue) { 
       scope.fileSizeError=newValue; 
      });   
} 

In meinem Fall habe ich in einer Richtlinie war das verwendet wird, um eine Datei zu laden, so brauchte ich den Zustand kennen der var $ error.maxSize in der Vorlage so habe ich auf diese Weise gemacht.