Angularjs empêche la soumission de formulaire lorsque la validation d'entrée échoue

J'écris un formulaire de connexion simple en utilisant angularjs avec une validation d'entrée côté client pour vérifier que le nom d'utilisateur et le mot de passe ne sont pas vides et dépassent 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 la login.submitfonction 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.

Tu peux faire:

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

Pas besoin de vérifications du contrôleur.

Remplacez le bouton d'envoi par:

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

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

<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)....
    }

Vos formulaires sont automatiquement placés dans $ scope en tant qu'objet. Il est accessible via$scope[formName]

Voici un exemple qui fonctionnera avec votre configuration d'origine et sans avoir à passer le formulaire lui-même en tant que 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

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();
        }
    }
}

Bien que ce ne soit pas une solution directe pour la question des OP, si votre formulaire se trouve dans un ng-appcontexte, mais que vous souhaitez qu'Angular l'ignore complètement, vous pouvez le faire explicitement en utilisant lengNonBindable directive:

<form ng-non-bindable>
  ...
</form>

Juste pour ajouter aux réponses ci-dessus,

J'avais 2 boutons réguliers comme indiqué ci-dessous. (Aucun type = "soumettre" n'importe où)

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>
<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Peu importe combien j'ai essayé, appuyez sur Entrée une fois que le formulaire était valide , le bouton "Effacer le formulaire" a été appelé, effaçant tout le formulaire.

Pour contourner ce problème,

J'ai dû ajouter un bouton de soumission factice qui était désactivé et masqué. Et ce bouton factice devait être au-dessus de tous les autres boutons comme indiqué ci-dessous .

<button type="submit" ng-hide="true" ng-disabled="true">Dummy</button>

<button ng-click="clearAll();" class="btn btn-default">Clear Form</button>

<button ng-disabled="form.$invalid" ng-click="submit();"class="btn btn-primary pull-right">Submit</button>

Eh bien, mon intention n'était jamais de soumettre sur Enter, donc le hack donné ci-dessus fonctionne très bien.

Je sais que c'est un vieux fil mais j'ai pensé que je ferais aussi une contribution. Ma solution étant similaire au post déjà marqué comme réponse. Certaines vérifications JavaScript en ligne font l'affaire.

ng-click="form.$invalid ? alert('Please correct the form') : saveTask(task)"

Je sais qu'il est tard et qu'on m'a répondu, mais j'aimerais partager les trucs sympas que j'ai faits. J'ai créé une directive ng-validate qui accroche le onsubmit du formulaire, puis il émet prevent-default si le $ eval est faux:

app.directive('ngValidate', function() {
  return function(scope, element, attrs) {
    if (!element.is('form'))
        throw new Error("ng-validate must be set on a form elment!");

    element.bind("submit", function(event) {
        if (!scope.$eval(attrs.ngValidate, {'$event': event}))
            event.preventDefault();
        if (!scope.$$phase)
            scope.$digest();            
    });
  };
});

Dans votre html:

<form name="offering" method="post" action="offer" ng-validate="<boolean expression">