AngularJS ng-pattern mit CamelCase Pattern als Beispiel


AngularJS bietet die unterschiedlichsten Direktiven zum Validieren von Eingabefeldern an und darunter befindet sich auch die Direktive “ng-pattern” mit der Eingabewerte über Reguläre Ausdrücke validiert werden können. Da ich mit Regulären Ausdrücken nicht so viel zu tun habe, habe ich mich bei der ersten Verwendung etwas schwer getan und leider gab es auch kein direktes Beispiel in der Dokumentation.

Ich habe mir einen Regulären Ausdruck erstellt der prüfen soll ob die Eingabe in “CamelCase” Schreibweise eingegeben wurde.

Regulärer Ausdruck:  /^((^[A-Z][a-z0-9]+)([A-Z][a-z0-9]+)*)$/

Wenn hier jemand eine effektiveren Ausdruck kennt dann freue ich mich sehr über einen passenden Kommentar.

In AngularJS kann der Reguläre Ausdruck direkt dem “ng-pattern” übergeben werden

<input type="text" 
             name="ccName" 
             data-ng-model="ViewModel.CamelCaseName" 
              data-ng-pattern="/^((^[A-Z][a-z0-9]+)([A-Z][a-z0-9]+)*)$/" 
              placeholder="Enter CamelCase String">

oder man speichert ihn im Controller in einer Variablen und übergibt diese dem “ng-pattern”. Achtung um das Regex Pattern keine Anführungszeichen setzen!

...
  $scope.ViewModel = {
        CamelCaseName: "TestCamleCase",
        CamelCasePattern: /^((^[A-Z][a-z0-9]+)([A-Z][a-z0-9]+)*)$/
    };
...

im “ng-pattern” die Variable setzen statt des Patterns.

<input type="text" 
             name="ccName" 
             data-ng-model="ViewModel.CamelCaseName" 
              data-ng-pattern="ViewModel.CamelCasePattern"
              placeholder="Enter CamelCase String">

Zum Erstellen und überprüfen von Regulären Ausdrücken verwende ich auch gern die folgende Webseite:

https://regex101.com/r/gM3qM0/1#javascript

Das ganze Codebeispiel findet man auch wieder in Codeplex.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s