wake-up-neo.com

Angularjs dynamische Überprüfung von NG-Mustern

Ich habe ein Formular, das bei einer falschen Checkbox die Validierung einer Texteingabe mit der Anweisung ng-required erzwingt. Wenn das Kontrollkästchen auf true gesetzt ist, ist das Feld ausgeblendet und der Wert für ng-required ist auf false gesetzt.

Das Problem ist, dass ich auch einen regulären Ausdruck für die Validierung in der Eingabe angegeben habe und die ng-pattern angle-Direktive verwende. Mein Problem ist, dass wenn ein Benutzer eine ungültige Telefonnummer eingibt, das Kontrollkästchen zur Deaktivierung dieser Eingabe aktiviert wird (und folglich keine weitere Bestätigung erforderlich ist), das Formular die Übermittlung nicht zulässt, da es aufgrund des ng-Musters ungültig ist.

Ich habe versucht, dieses Problem durch Hinzufügen einer Funktion "ng-change" zu beheben, um das Eingabemodell auf null zu setzen. Allerdings ist das Muster "ng-pattern" und somit das Feld in der ursprünglichen Gruppe des Kontrollkästchens auf "false" gesetzt. Wenn ich jedoch das Häkchen entferne, alles wieder auf das anfängliche Laden des Formulars zurücksetzen, dann das Kästchen erneut markieren, das Formular ist gültig und kann abschicken. Ich bin mir nicht sicher, was mir fehlt. Hier ist der ng-change Code, den ich bis jetzt habe:

    var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    $scope.phoneNumberPattern = phoneNumberRegex;
    $scope.removeValidation = function() {
        if ($scope.cell._newUser === false) {
            $scope.request._number = '';
            $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
        } else {
            $scope.phoneNumberPattern = phoneNumberRegex;
        }
    };
angularjsangularjs-directiveangularjs-ng-change
83
Brian

Dies ist ein interessantes Problem, komplexe Angular-Validierung. Die folgende Geige implementiert, was Sie wollen:

http://jsfiddle.net/2G8gA/1/

Einzelheiten

Ich habe eine neue Direktive, rpattern, erstellt, die eine Mischung aus Angulars ng-required und dem ng-pattern-Code aus input[type=text] ist. Was es tut, ist das required-Attribut des Feldes zu beobachten und dies bei der Überprüfung mit Regex zu berücksichtigen, d. H. Falls nicht erforderlich, markieren Sie das Feld als valid-pattern.

Anmerkungen

  • Der größte Teil des Codes stammt von Angular und ist auf dessen Bedürfnisse zugeschnitten.
  • Wenn das Kontrollkästchen aktiviert ist, ist das Feld erforderlich.
  • Das Feld wird nicht ausgeblendet, wenn das erforderliche Kontrollkästchen false ist.
  • Der reguläre Ausdruck wird für die Demo vereinfacht (gültig sind 3 Ziffern).

Eine dirty (aber kleinere) Lösung, wenn Sie keine neue Direktive wünschen, würde ungefähr so ​​aussehen:

$scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            if( $scope.requireTel === false ) {
                return true;
            }
            return regexp.test(value);
        }
    };
})();

Und in HTML wären keine Änderungen erforderlich:

<input type="text" ng-model="..." ng-required="requireTel"
    ng-pattern="phoneNumberPattern" />

Dies führt tatsächlich dazu, dass die ourtest()-Methode anstelle von RegExp.test() aufgerufen wird, die die required berücksichtigt.

174
Nikos Paraskevopoulos

Wenn Sie Nikos 'beeindruckende Antwort nicht nehmen, können Sie dies vielleicht einfacher tun:

<form name="telForm">
  <input name="cb" type='checkbox' data-ng-modal='requireTel'>
  <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
  <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

Achten Sie auf die zweite Eingabe: Wir können einenng-ifverwenden, um die Darstellung und Validierung in Formularen zu steuern. Wenn die Variable requireTel nicht gesetzt ist, wird die zweite Eingabe nicht nur ausgeblendet, sondern überhaupt nicht gerendert Das Formular besteht die Bestätigung und die Schaltfläche wird aktiviert, und Sie erhalten, was Sie benötigen.

25
kumar_harsh

Verwendetes Muster: 

 ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"

Verwendete Referenzdatei:

 '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'

Beispiel für die Eingabe:

 <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
5
Anil Singh

Ich bin gerade neulich darauf gestoßen.

Was ich getan habe, was einfacher scheint als das oben Genannte, besteht darin, das Muster für eine Variable im Gültigkeitsbereich festzulegen und in der Ansicht in ng-pattern darauf zu verweisen. 

Wenn "das Kontrollkästchen nicht markiert ist", setze ich den Regex-Wert für den onChanged-Rückruf einfach auf /.*/ (falls nicht aktiviert). Das ng-Muster wählt diese Änderung aus und sagt "OK, Ihr Wert ist in Ordnung". Das Formular ist jetzt gültig. Ich würde auch die fehlerhaften Daten aus dem Feld entfernen, so dass kein scheinbar schlechtes Telefon # dort sitzt.

Ich hatte zusätzliche Probleme mit NG-Required und tat das Gleiche. Lief wie am Schnürchen.

2
jessewolfe
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
2
Jijo Paulose

Legt den Muster-Validierungsfehlerschlüssel fest, wenn ngModel $ viewValue nicht mit einem gefundenen RegExp übereinstimmt, indem der im Attributwert angegebene Angular-Ausdruck ausgewertet wird. Wenn der Ausdruck zu einem RegExp-Objekt ausgewertet wird, wird dieses direkt verwendet. Wenn der Ausdruck zu einer Zeichenfolge ausgewertet wird, wird er nach dem Einbetten in die Zeichen ^ und $ in RegExp konvertiert.

Es scheint, dass die am meisten gewählte Antwort in dieser Frage aktualisiert werden sollte, denn wenn ich es versuche, gilt die test-Funktion und die Validierung nicht.

Beispiel aus Angular docs funktioniert gut für mich:

Eingebaute Validatoren ändern

html

<form name="form" class="css-form" novalidate>
  <div>
   Overwritten Email:
   <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
   Model: {{myEmail}}
  </div>
</form>

js

var app = angular.module('form-example-modify-validators', []);

app.directive('overwriteEmail', function() {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-][email protected]\.com$/i;

    return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, Elm, attrs, ctrl) {
            // only apply the validator if ngModel is present and Angular has added the email validator
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                };
             }
         }
     };
 });

Plunker

0
theodor