Wie funktioniert eine jQuery-Eingabevalidierungsfunktion mit Angular-Vorlagen?

Question

Ich verwende eine jQuery-Funktion, um Formulare automatisch zu verarbeiten und Fehler anzuzeigen, so wie sie mit jQuery auftreten. Ich verwende auch Bootstrap 3.

(function() { 
    // Form Processing 
    $('input').each(function() { 
     var $this = $(this); 
     $this.on('input', function() { 
      if ($this.val().length === 0) { 
       if ($this.attr('required')) { 
        $this 
         .parent('div.control-group') 
         .addClass('has-error') 
         .end() 
         .siblings('p.text-danger') 
         .empty() 
         .text('This field is required'); 
       } else {} 
      } else {} 
     }); 
    }); 
})(); 

Grundsätzlich überprüft dies, ob ein Feld erforderlich ist. Wenn das Feld nicht gültig ist, wird eine einfache Fehlermeldung angezeigt. Es funktioniert auch wirklich gut.

Hier ist eine grundlegende Vorlage, die diese Arbeit macht:

<div class="control-group> 
    <input type="email" required> 
    <p class="text-danger"></p> 
</div> 

Allerdings, wenn ich Angular Vorlagen verwenden, wird der Code nicht auftreten, da das DOM nicht vor der Hand geladen wird. Ich denke, der richtige Weg zum Handeln wäre die Schaffung einer Angular-Direktive für diesen Code. Ich habe ein paar Fragen dazu:

• Wo stelle ich das Derivat? Sollte es so etwas wie myapp.run sein?
• Bin ich falsch in meiner Annahme, ein Derivat zu erstellen? Gibt es einen besseren Weg dies zu tun, so dass es mit Angular funktioniert?

Danke.

Answer 1

Sie können mit ng-Nachrichten Richtlinie kombinierter Form oder ng-Form-Richtlinie verwenden, um zu vermeiden jquery Mischen mit Winkel

Beispiel

<form name="myForm"> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 
    <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre> 

    <div ng-messages="myForm.myName.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 
</form> 

Quelle https://docs.angularjs.org/api/ngMessages/directive/ngMessages