Ich schreibe ein einfaches Anmeldeformular mit anglejs mit einer clientseitigen Eingabevalidierung, um zu überprüfen, ob der Benutzername und das Kennwort nicht leer und länger als drei Zeichen sind. Siehe den folgenden Code:
<form name="loginform" novalidate ng-submit="login.submit()" class="css-form">
<fieldset>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-user"></i></span>
<input type="text" ng-model="login.username" name="username" required ng-minlength="3" placeholder="username" />
</div>
<div class="control-group input-prepend">
<span class="add-on"><i class="icon-lock"></i></span>
<input type="password" ng-model="login.password" name="password" required ng-minlength="3" placeholder="" />
</div>
<div class="control-group">
<input class="btn" type="submit" value="Log in">
</div>
</fieldset>
</form>
Und der Controller:
var controller = function($scope) {
$scope.login = {
submit: function() {
Console.info($scope.login.username + ' ' + $scope.login.password);
}
}
};
Das Problem ist, dass die login.submit
Funktion auch dann aufgerufen wird, wenn die Eingabe ungültig ist. Ist es möglich, dieses Verhalten zu verhindern?
Als Randnotiz kann ich erwähnen, dass ich auch Bootstrap und Requirejs verwende.
angularjs
validation
Runar Halse
quelle
quelle
Antworten:
Du kannst tun:
Keine Notwendigkeit für Controller-Überprüfungen.
quelle
&&
Wert nicht kurzschließt, nachdem ich versucht habe, den Wert als Teil des Submit zu übergeben, und bestätigt habe, dass der Wert selbst "falsch" istÄndern Sie die Schaltfläche "Senden" in:
quelle
Die vorgeschlagene Antwort von TheHippo funktionierte also nicht für mich, sondern ich schickte das Formular als Parameter an die Funktion wie folgt:
Dadurch wird das Formular in der Controller-Methode verfügbar:
quelle
Ihre Formulare werden automatisch als Objekt in $ scope eingefügt. Es kann über zugegriffen werden
$scope[formName]
Unten finden Sie ein Beispiel, das mit Ihrem ursprünglichen Setup funktioniert und ohne das Formular selbst als Parameter in ng-submit übergeben zu müssen.
Arbeitsbeispiel: http://plnkr.co/edit/BEWnrP?p=preview
quelle
if(this.loginform.$invalid)
.. verwenden, aber dann müssen Sie im HTML dem Formular den Namen geben<form name="ctrl.loginform" ..
. Und das setzt voraus, dass Sie<div ng-controller="controller as ctrl"..
in Ihrer Controller-as-Syntax verwenden. Vielen Dank @JoshCarollHTML:
In Ihrem Controller:
quelle
event.preventDefault()
ist dies der richtige Weg, um die Formularübermittlung zu stoppen.Obwohl dies keine direkte Lösung für die OP-Frage ist
ng-app
, können Sie dies explizit mithilfe derngNonBindable
Direktive tun , wenn sich Ihr Formular in einem Kontext befindet, Angular es jedoch vollständig ignorieren soll :quelle
Nur um die obigen Antworten zu ergänzen,
Ich hatte 2 normale Tasten wie unten gezeigt. (Kein Typ = "Submit" irgendwo)
Egal wie viel ich versucht habe, die Eingabetaste zu drücken, sobald das Formular gültig war , wurde die Schaltfläche "Formular löschen" aufgerufen, wodurch das gesamte Formular gelöscht wurde.
Um dieses Problem zu umgehen,
Ich musste einen Dummy-Submit-Button hinzufügen, der deaktiviert und ausgeblendet war. Und dieser Dummy-Button musste über allen anderen Buttons liegen, wie unten gezeigt .
Nun, meine Absicht war es nie, bei Enter einzureichen, also funktioniert der oben angegebene Hack einfach einwandfrei.
quelle
Ich weiß, dass dies ein alter Thread ist, aber ich dachte, ich würde auch einen Beitrag leisten. Meine Lösung ähnelt dem Beitrag, der bereits als Antwort markiert wurde. Einige Inline-JavaScript-Überprüfungen reichen aus.
quelle
Ich weiß, dass es spät ist und beantwortet wurde, aber ich möchte die netten Sachen teilen, die ich gemacht habe. Ich habe eine ng-validate-Direktive erstellt, die das Onsubmit des Formulars verknüpft. Wenn das $ eval false ist, wird dann die Vorbeugung ausgeführt.
In Ihrem HTML:
quelle