Angularjs empêche la soumission du formulaire lorsque la validation des entrées échoue

Question

J'écris un formulaire de connexion simple en utilisant angularjs avec une validation des entrées côté client pour vérifier que le nom d'utilisateur et le mot de passe ne sont pas vides et ont plus de trois caractères. Voir le code ci-dessous :

<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>

Et le contrôleur :

var controller = function($scope) {

    $scope.login = {
        submit: function() {

            Console.info($scope.login.username + ' ' + $scope.login.password);
        }
    }

};

Le problème est que le login.submit sera appelée même si l'entrée n'est pas valide. Est-il possible d'empêcher ce comportement ?

En passant, je peux mentionner que j'utilise également bootstrap et requirejs.

Answer 1

Vous pouvez le faire :

<form name="loginform" novalidate ng-submit="loginform.$valid && login.submit()">

Pas besoin de vérifier le contrôleur.

Answer 2

Changez le bouton d'envoi en :

<button type="submit" ng-disabled="loginform.$invalid">Login</button>

Answer 3

La réponse suggérée par TheHippo n'a pas fonctionné pour moi, j'ai fini par envoyer le formulaire en tant que paramètre à la fonction comme suit :

<form name="loginform" novalidate ng-submit="login.submit(loginForm)" class="css-form">

Cela rend le formulaire disponible dans la méthode du contrôleur :

$scope.login = {
    submit : function(form) {
        if(form.$valid)....
    }

Answer 4

HTML :

<div class="control-group">
    <input class="btn" type="submit" value="Log in" ng-click="login.onSubmit($event)">
</div>

Dans votre contrôleur :

$scope.login = {
    onSubmit: function(event) {
        if (dataIsntValid) {
            displayErrors();
            event.preventDefault();
        }
        else {
            submitData();
        }
    }
}

Answer 5

Vos formulaires sont automatiquement placés dans $scope en tant qu'objet. On peut y accéder via $scope[formName]

Vous trouverez ci-dessous un exemple qui fonctionnera avec votre configuration originale et sans avoir à passer le formulaire lui-même comme paramètre dans ng-submit.

var controller = function($scope) {

    $scope.login = {
        submit: function() {
            if($scope.loginform.$invalid) return false;

        }
    }

};

Exemple de travail : http://plnkr.co/edit/BEWnrP?p=preview