Winkel-Validierung - verhindern-button ng-click() als Formular ungültig ist

Habe ich eine eckige form als Teil eines single-page-App. Der "Weiter" - button bewegt ein Benutzer den nächsten Abschnitt der app, und hat eine ng-click. Ich möchte verhindern, dass diese ng-click passiert, wenn die Schaltfläche geklickt wird, und der form ungültig ist, aber ich nicht wollen, deaktivieren Sie die Schaltfläche Weiter.

Beispiel: Ein Benutzer kommt auf die Seite und sofort klickt auf die Schaltfläche Weiter, ohne ein Vorname. Die Fehlermeldung "geben Sie einen Vornamen ein" angezeigt wird und der user bleibt auf der Seite.

Wie kann ich dies tun? Hier ist der code: 

<form name="form" novalidate >

<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
    You must enter a first name
</div>

<div class="form-group">
    <label for="firstName" class="form-label">First Name</label>
    <input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>

<div class="btn-group">
    <button ng-click="vm.next()">Continue</button>
</div>
</form>
InformationsquelleAutor noclist | 2015-11-13
  1. 8

    Fügen Sie einfach form.$valid && vor dem Aufruf der Funktion:

    <form name="form" novalidate >

<div ng-show="form.FirstName.$touched && form.FirstName.$error.required" class="errorMessage">
    You must enter a first name
</div>

<div class="form-group">
    <label for="firstName" class="form-label">First Name</label>
    <input id="firstName" class="form-control" name="FirstName" ng-model="vm.user.firstName" required />
</div>

<div class="btn-group">
    <button ng-click="form.$valid && vm.next()">Continue</button>
</div>
</form>
    • Funktioniert gut, gibt es eine Möglichkeit zu zeigen, die Fehlermeldungen beim klicken auf die Schaltfläche Weiter?
    • Nur überprüfen, ob der Benutzer bereits ausprobiert: ng-show="tried && form.FirstName.$touched && form.FirstName.$error.required" + ng-click="tried = true; form.$valid && vm.next()"
    • Aber da du jetzt hinzufügen viel Logik zu der Ansicht, Sie sollten in Erwägung ziehen, es in eine controller-Funktion.
    InformationsquelleAutor Carl Ambroselli
  2. 2

    Entweder eine Schaltfläche ist deaktiviert, oder es ist klickbar, Sie können es nicht haben beide weisen.

    Was Sie tun können, in Ihre controller für die vm.next() ist zu sagen:

    myApp.controller('Page1Controller'),  ['$scope', function ($scope)
{
    $scope.vm = {};

    $scope.vm.next = function()
    {
        if (! $scope.vm.isFormValid())            
            return;            
        //move to the next page with your current code
        ...
    }

    $scope.vm.isFormValid()
    {
        $scope.vm.shouldShowError = $scope.form.valid; //add vm.shouldShowError to your error message ng-show in the view so it will display only after clicking continue
        return $scope.form.valid;
    }
}]);
    • Ich akzeptiere, wenn eine Taste nicht nehmen sollen, um Sie auf die nächste Seite/form/etc. es sollte so erscheinen, um den Benutzer, dass die Taste nicht funktioniert. Am besten deaktivieren Sie die Schaltfläche mit vm.form.$invalid.
    • Brauche ich zum schreiben eines isFormValid () - Funktion? ich dachte, es könnte etwas gebaut, um Winkel zu ermitteln.
    • Nein, Sie können nur $Umfang.form.gültig. Fand ich in größeren Formen, die ich fast immer zu tun hatte, die irgendeine Art von benutzerdefinierten Validierung also ich habe in die Gewohnheit, immer mit einer isValid-Funktion für bessere Lesbarkeit.
    • Probleme definieren $scope, da ich derzeit nicht verwenden Sie es in meinem controller.
    • Hinzugefügt Beispiel controller Erklärung mit $scope auf meine Antwort
    InformationsquelleAutor Richard
Schreibe einen Kommentar